From 9fc13c3d3cf5425648193cf782f532e25cc055f6 Mon Sep 17 00:00:00 2001 From: Horacio Date: Wed, 9 Nov 2022 20:28:14 -0700 Subject: [PATCH 1/3] Update api-routes-apollo-server example to use @as-integrations/next --- examples/api-routes-apollo-server/README.md | 2 +- .../api-routes-apollo-server/package.json | 13 ++++++++++-- .../pages/{[username].js => [username].tsx} | 5 +++-- .../pages/api/{graphql.js => graphql.ts} | 18 ++++++++--------- .../pages/{index.js => index.tsx} | 0 .../query-graphql/{index.js => index.ts} | 0 .../api-routes-apollo-server/tsconfig.json | 20 +++++++++++++++++++ 7 files changed, 44 insertions(+), 14 deletions(-) rename examples/api-routes-apollo-server/pages/{[username].js => [username].tsx} (89%) rename examples/api-routes-apollo-server/pages/api/{graphql.js => graphql.ts} (62%) rename examples/api-routes-apollo-server/pages/{index.js => index.tsx} (100%) rename examples/api-routes-apollo-server/shared/query-graphql/{index.js => index.ts} (100%) create mode 100644 examples/api-routes-apollo-server/tsconfig.json diff --git a/examples/api-routes-apollo-server/README.md b/examples/api-routes-apollo-server/README.md index 4eca8668283cc32..948aa4794da65a1 100644 --- a/examples/api-routes-apollo-server/README.md +++ b/examples/api-routes-apollo-server/README.md @@ -1,6 +1,6 @@ # Consume local Apollo GraphQL schema to create Static Generation export -Next.js ships with two forms of pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) and [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). This example shows how to perform Static Generation using a local [Apollo GraphQL](https://www.apollographql.com/docs/apollo-server/) schema within [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) and [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths.md). The end result is a Next.js application that uses one Apollo GraphQL schema to generate static pages at build time and also serve a GraphQL [API Route](https://nextjs.org/docs/api-routes/introduction) at runtime. +Next.js ships with two forms of pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) and [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). This example shows how to perform Static Generation using a local [Apollo GraphQL Server ](https://www.apollographql.com/docs/apollo-server/) schema within [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) and [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths.md). The end result is a Next.js application that uses one Apollo GraphQL schema to generate static pages at build time and also serve a GraphQL [API Route](https://nextjs.org/docs/api-routes/introduction) at runtime. The integration with Next and Apollo Server is implemented using the [apollo-server-integration-next](https://github.com/apollo-server-integrations/apollo-server-integration-next) community package. ## Deploy your own diff --git a/examples/api-routes-apollo-server/package.json b/examples/api-routes-apollo-server/package.json index 31c59e7798ddbe2..079ccbefeedced6 100644 --- a/examples/api-routes-apollo-server/package.json +++ b/examples/api-routes-apollo-server/package.json @@ -7,10 +7,19 @@ "start": "next start" }, "dependencies": { - "apollo-server-micro": "2.13.1", - "graphql": "15.0.0", + "@apollo/server": "^4.1.1", + "@as-integrations/next": "^1.1.0", + "@graphql-tools/schema": "^9.0.9", + "graphql": "16.6.0", + "graphql-tag": "^2.12.6", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "^18.0.0", + "@types/react": "^18.0.14", + "@types/react-dom": "^18.0.5", + "typescript": "^4.7.4" } } diff --git a/examples/api-routes-apollo-server/pages/[username].js b/examples/api-routes-apollo-server/pages/[username].tsx similarity index 89% rename from examples/api-routes-apollo-server/pages/[username].js rename to examples/api-routes-apollo-server/pages/[username].tsx index 30f792c375ae2dd..c9e3dc7bae21a81 100644 --- a/examples/api-routes-apollo-server/pages/[username].js +++ b/examples/api-routes-apollo-server/pages/[username].tsx @@ -29,13 +29,14 @@ export async function getStaticProps(context) { } export async function getStaticPaths() { - const { users } = await queryGraphql(` + const { users } = (await queryGraphql(` query { users { username } } - `) + `)) as { users: { username: string }[] } + return { paths: users.map(({ username }) => ({ params: { username }, diff --git a/examples/api-routes-apollo-server/pages/api/graphql.js b/examples/api-routes-apollo-server/pages/api/graphql.ts similarity index 62% rename from examples/api-routes-apollo-server/pages/api/graphql.js rename to examples/api-routes-apollo-server/pages/api/graphql.ts index b04bc2181ad257e..cc9ef447959916a 100644 --- a/examples/api-routes-apollo-server/pages/api/graphql.js +++ b/examples/api-routes-apollo-server/pages/api/graphql.ts @@ -1,4 +1,7 @@ -import { ApolloServer, gql, makeExecutableSchema } from 'apollo-server-micro' +import { ApolloServer } from '@apollo/server' +import { startServerAndCreateNextHandler } from '@as-integrations/next' +import { makeExecutableSchema } from '@graphql-tools/schema' +import { gql } from 'graphql-tag' const typeDefs = gql` type Query { @@ -10,6 +13,7 @@ const typeDefs = gql` username: String } ` + const users = [ { name: 'Leeroy Jenkins', username: 'leeroy' }, { name: 'Foo Bar', username: 'foobar' }, @@ -28,12 +32,8 @@ const resolvers = { export const schema = makeExecutableSchema({ typeDefs, resolvers }) -export const config = { - api: { - bodyParser: false, - }, -} - -export default new ApolloServer({ schema }).createHandler({ - path: '/api/graphql', +const server = new ApolloServer({ + schema, }) + +export default startServerAndCreateNextHandler(server) diff --git a/examples/api-routes-apollo-server/pages/index.js b/examples/api-routes-apollo-server/pages/index.tsx similarity index 100% rename from examples/api-routes-apollo-server/pages/index.js rename to examples/api-routes-apollo-server/pages/index.tsx diff --git a/examples/api-routes-apollo-server/shared/query-graphql/index.js b/examples/api-routes-apollo-server/shared/query-graphql/index.ts similarity index 100% rename from examples/api-routes-apollo-server/shared/query-graphql/index.js rename to examples/api-routes-apollo-server/shared/query-graphql/index.ts diff --git a/examples/api-routes-apollo-server/tsconfig.json b/examples/api-routes-apollo-server/tsconfig.json new file mode 100644 index 000000000000000..b8d597880a1ae63 --- /dev/null +++ b/examples/api-routes-apollo-server/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} From 1d2c0ed8c4baf2023c69e911bc8adc8f0ef8bfdd Mon Sep 17 00:00:00 2001 From: Horacio Date: Thu, 10 Nov 2022 08:29:36 -0700 Subject: [PATCH 2/3] Update api-routes-apollo-server-and-client example to use @as-integrations/next --- .../README.md | 2 +- .../apollo/{client.js => client.tsx} | 7 +++---- .../apollo/{resolvers.js => resolvers.ts} | 2 +- .../apollo/{schema.js => schema.ts} | 2 +- .../apollo/{type-defs.js => type-defs.ts} | 0 .../package.json | 15 ++++++++++---- .../pages/{_app.js => _app.tsx} | 0 .../pages/{about.js => about.tsx} | 0 .../pages/api/graphql.js | 12 ----------- .../pages/api/graphql.ts | 7 +++++++ .../pages/{index.js => index.tsx} | 0 .../tsconfig.json | 20 +++++++++++++++++++ 12 files changed, 44 insertions(+), 23 deletions(-) rename examples/api-routes-apollo-server-and-client/apollo/{client.js => client.tsx} (86%) rename examples/api-routes-apollo-server-and-client/apollo/{resolvers.js => resolvers.ts} (71%) rename examples/api-routes-apollo-server-and-client/apollo/{schema.js => schema.ts} (71%) rename examples/api-routes-apollo-server-and-client/apollo/{type-defs.js => type-defs.ts} (100%) rename examples/api-routes-apollo-server-and-client/pages/{_app.js => _app.tsx} (100%) rename examples/api-routes-apollo-server-and-client/pages/{about.js => about.tsx} (100%) delete mode 100644 examples/api-routes-apollo-server-and-client/pages/api/graphql.js create mode 100644 examples/api-routes-apollo-server-and-client/pages/api/graphql.ts rename examples/api-routes-apollo-server-and-client/pages/{index.js => index.tsx} (100%) create mode 100644 examples/api-routes-apollo-server-and-client/tsconfig.json diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md index 446d8f52a9cdfa4..281b8e443a1d313 100644 --- a/examples/api-routes-apollo-server-and-client/README.md +++ b/examples/api-routes-apollo-server-and-client/README.md @@ -1,6 +1,6 @@ # Apollo Server and Client Example -[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run. +[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run. The integration with Next and Apollo Server is implemented using the [apollo-server-integration-next](https://github.com/apollo-server-integrations/apollo-server-integration-next) community package. In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser. diff --git a/examples/api-routes-apollo-server-and-client/apollo/client.js b/examples/api-routes-apollo-server-and-client/apollo/client.tsx similarity index 86% rename from examples/api-routes-apollo-server-and-client/apollo/client.js rename to examples/api-routes-apollo-server-and-client/apollo/client.tsx index de4dc3b2d110bd8..a6d28253a297f54 100644 --- a/examples/api-routes-apollo-server-and-client/apollo/client.js +++ b/examples/api-routes-apollo-server-and-client/apollo/client.tsx @@ -1,16 +1,15 @@ import { useMemo } from 'react' -import { ApolloClient, InMemoryCache } from '@apollo/client' +import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client' +import { SchemaLink } from '@apollo/client/link/schema' +import { schema } from '../apollo/schema' import merge from 'deepmerge' let apolloClient function createIsomorphLink() { if (typeof window === 'undefined') { - const { SchemaLink } = require('@apollo/client/link/schema') - const { schema } = require('./schema') return new SchemaLink({ schema }) } else { - const { HttpLink } = require('@apollo/client/link/http') return new HttpLink({ uri: '/api/graphql', credentials: 'same-origin', diff --git a/examples/api-routes-apollo-server-and-client/apollo/resolvers.js b/examples/api-routes-apollo-server-and-client/apollo/resolvers.ts similarity index 71% rename from examples/api-routes-apollo-server-and-client/apollo/resolvers.js rename to examples/api-routes-apollo-server-and-client/apollo/resolvers.ts index 94a103eda6606bc..f85c4772231d506 100644 --- a/examples/api-routes-apollo-server-and-client/apollo/resolvers.js +++ b/examples/api-routes-apollo-server-and-client/apollo/resolvers.ts @@ -1,6 +1,6 @@ export const resolvers = { Query: { - viewer(_parent, _args, _context, _info) { + viewer() { return { id: 1, name: 'John Smith', status: 'cached' } }, }, diff --git a/examples/api-routes-apollo-server-and-client/apollo/schema.js b/examples/api-routes-apollo-server-and-client/apollo/schema.ts similarity index 71% rename from examples/api-routes-apollo-server-and-client/apollo/schema.js rename to examples/api-routes-apollo-server-and-client/apollo/schema.ts index f6d70b7e86243cf..0f14aa64f6cc896 100644 --- a/examples/api-routes-apollo-server-and-client/apollo/schema.js +++ b/examples/api-routes-apollo-server-and-client/apollo/schema.ts @@ -1,4 +1,4 @@ -import { makeExecutableSchema } from 'graphql-tools' +import { makeExecutableSchema } from '@graphql-tools/schema' import { typeDefs } from './type-defs' import { resolvers } from './resolvers' diff --git a/examples/api-routes-apollo-server-and-client/apollo/type-defs.js b/examples/api-routes-apollo-server-and-client/apollo/type-defs.ts similarity index 100% rename from examples/api-routes-apollo-server-and-client/apollo/type-defs.js rename to examples/api-routes-apollo-server-and-client/apollo/type-defs.ts diff --git a/examples/api-routes-apollo-server-and-client/package.json b/examples/api-routes-apollo-server-and-client/package.json index 8ac88860500d3f7..b27b1f5e212e27e 100644 --- a/examples/api-routes-apollo-server-and-client/package.json +++ b/examples/api-routes-apollo-server-and-client/package.json @@ -6,13 +6,20 @@ "start": "next start" }, "dependencies": { - "@apollo/client": "^3.0.2", - "apollo-server-micro": "^2.14.2", + "@apollo/client": "^3.7.1", + "@apollo/server": "^4.1.1", + "@as-integrations/next": "^1.1.0", + "@graphql-tools/schema": "^9.0.9", "deepmerge": "4.2.2", - "graphql": "^14.0.2", + "graphql": "^16.6.0", "next": "latest", - "prop-types": "^15.6.2", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "^18.0.2", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6", + "typescript": "^4.7.4" } } diff --git a/examples/api-routes-apollo-server-and-client/pages/_app.js b/examples/api-routes-apollo-server-and-client/pages/_app.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client/pages/_app.js rename to examples/api-routes-apollo-server-and-client/pages/_app.tsx diff --git a/examples/api-routes-apollo-server-and-client/pages/about.js b/examples/api-routes-apollo-server-and-client/pages/about.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client/pages/about.js rename to examples/api-routes-apollo-server-and-client/pages/about.tsx diff --git a/examples/api-routes-apollo-server-and-client/pages/api/graphql.js b/examples/api-routes-apollo-server-and-client/pages/api/graphql.js deleted file mode 100644 index 5efa800e28cd861..000000000000000 --- a/examples/api-routes-apollo-server-and-client/pages/api/graphql.js +++ /dev/null @@ -1,12 +0,0 @@ -import { ApolloServer } from 'apollo-server-micro' -import { schema } from '../../apollo/schema' - -const apolloServer = new ApolloServer({ schema }) - -export const config = { - api: { - bodyParser: false, - }, -} - -export default apolloServer.createHandler({ path: '/api/graphql' }) diff --git a/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts b/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts new file mode 100644 index 000000000000000..046f13374850e59 --- /dev/null +++ b/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts @@ -0,0 +1,7 @@ +import { ApolloServer } from '@apollo/server' +import { startServerAndCreateNextHandler } from '@as-integrations/next' +import { schema } from '../../apollo/schema' + +const apolloServer = new ApolloServer({ schema }) + +export default startServerAndCreateNextHandler(apolloServer) diff --git a/examples/api-routes-apollo-server-and-client/pages/index.js b/examples/api-routes-apollo-server-and-client/pages/index.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client/pages/index.js rename to examples/api-routes-apollo-server-and-client/pages/index.tsx diff --git a/examples/api-routes-apollo-server-and-client/tsconfig.json b/examples/api-routes-apollo-server-and-client/tsconfig.json new file mode 100644 index 000000000000000..b8d597880a1ae63 --- /dev/null +++ b/examples/api-routes-apollo-server-and-client/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} From 9ad29ac3a2ae53717fcf04df2d5ce8195d80aa97 Mon Sep 17 00:00:00 2001 From: Horacio Date: Thu, 10 Nov 2022 19:41:40 -0700 Subject: [PATCH 3/3] Update api-routes-apollo-server-and-client-auth example to use @as-integrations/next --- .../README.md | 2 +- .../apollo/{client.js => client.tsx} | 7 +++---- .../apollo/{resolvers.js => resolvers.ts} | 15 +++++++++----- .../apollo/{schema.js => schema.ts} | 2 +- .../apollo/{type-defs.js => type-defs.ts} | 0 .../components/{field.js => field.tsx} | 0 .../lib/{auth-cookies.js => auth-cookies.ts} | 0 .../lib/{auth.js => auth.ts} | 0 .../lib/{form.js => form.ts} | 0 .../lib/{user.js => user.ts} | 0 .../package.json | 14 ++++++++++--- .../pages/{_app.js => _app.tsx} | 0 .../pages/{about.js => about.tsx} | 0 .../pages/api/graphql.js | 17 ---------------- .../pages/api/graphql.ts | 15 ++++++++++++++ .../pages/{index.js => index.tsx} | 5 +++-- .../pages/{signin.js => signin.tsx} | 0 .../pages/{signout.js => signout.tsx} | 0 .../pages/{signup.js => signup.tsx} | 0 .../tsconfig.json | 20 +++++++++++++++++++ 20 files changed, 64 insertions(+), 33 deletions(-) rename examples/api-routes-apollo-server-and-client-auth/apollo/{client.js => client.tsx} (86%) rename examples/api-routes-apollo-server-and-client-auth/apollo/{resolvers.js => resolvers.ts} (75%) rename examples/api-routes-apollo-server-and-client-auth/apollo/{schema.js => schema.ts} (71%) rename examples/api-routes-apollo-server-and-client-auth/apollo/{type-defs.js => type-defs.ts} (100%) rename examples/api-routes-apollo-server-and-client-auth/components/{field.js => field.tsx} (100%) rename examples/api-routes-apollo-server-and-client-auth/lib/{auth-cookies.js => auth-cookies.ts} (100%) rename examples/api-routes-apollo-server-and-client-auth/lib/{auth.js => auth.ts} (100%) rename examples/api-routes-apollo-server-and-client-auth/lib/{form.js => form.ts} (100%) rename examples/api-routes-apollo-server-and-client-auth/lib/{user.js => user.ts} (100%) rename examples/api-routes-apollo-server-and-client-auth/pages/{_app.js => _app.tsx} (100%) rename examples/api-routes-apollo-server-and-client-auth/pages/{about.js => about.tsx} (100%) delete mode 100644 examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.js create mode 100644 examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts rename examples/api-routes-apollo-server-and-client-auth/pages/{index.js => index.tsx} (83%) rename examples/api-routes-apollo-server-and-client-auth/pages/{signin.js => signin.tsx} (100%) rename examples/api-routes-apollo-server-and-client-auth/pages/{signout.js => signout.tsx} (100%) rename examples/api-routes-apollo-server-and-client-auth/pages/{signup.js => signup.tsx} (100%) create mode 100644 examples/api-routes-apollo-server-and-client-auth/tsconfig.json diff --git a/examples/api-routes-apollo-server-and-client-auth/README.md b/examples/api-routes-apollo-server-and-client-auth/README.md index 76a9de4e517e7fe..e59de06c8198b9e 100644 --- a/examples/api-routes-apollo-server-and-client-auth/README.md +++ b/examples/api-routes-apollo-server-and-client-auth/README.md @@ -1,6 +1,6 @@ # Apollo Server and Client Auth Example -[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run. +[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run. The integration with Next and Apollo Server is implemented using the [apollo-server-integration-next](https://github.com/apollo-server-integrations/apollo-server-integration-next) community package. In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser. diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/client.js b/examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx similarity index 86% rename from examples/api-routes-apollo-server-and-client-auth/apollo/client.js rename to examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx index 87aa90e97f71ce8..7c11f3e9b73d77b 100644 --- a/examples/api-routes-apollo-server-and-client-auth/apollo/client.js +++ b/examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx @@ -1,16 +1,15 @@ import { useMemo } from 'react' -import { ApolloClient, InMemoryCache } from '@apollo/client' +import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client' +import { SchemaLink } from '@apollo/client/link/schema' +import { schema } from '../apollo/schema' import merge from 'deepmerge' let apolloClient function createIsomorphLink() { if (typeof window === 'undefined') { - const { SchemaLink } = require('@apollo/client/link/schema') - const { schema } = require('./schema') return new SchemaLink({ schema }) } else { - const { HttpLink } = require('@apollo/client/link/http') return new HttpLink({ uri: '/api/graphql', credentials: 'same-origin', diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.js b/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts similarity index 75% rename from examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.js rename to examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts index 4dafa4d5a8ed514..d05e8788d723376 100644 --- a/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.js +++ b/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts @@ -1,11 +1,11 @@ -import { AuthenticationError, UserInputError } from 'apollo-server-micro' import { createUser, findUser, validatePassword } from '../lib/user' import { setLoginSession, getLoginSession } from '../lib/auth' import { removeTokenCookie } from '../lib/auth-cookies' +import { GraphQLError } from 'graphql' export const resolvers = { Query: { - async viewer(_parent, _args, context, _info) { + async viewer(_root, _args, context, _info) { try { const session = await getLoginSession(context.req) @@ -13,8 +13,13 @@ export const resolvers = { return findUser({ email: session.email }) } } catch (error) { - throw new AuthenticationError( - 'Authentication token is invalid, please log in' + throw new GraphQLError( + 'Authentication token is invalid, please log in', + { + extensions: { + code: 'UNAUTHENTICATED', + }, + } ) } }, @@ -38,7 +43,7 @@ export const resolvers = { return { user } } - throw new UserInputError('Invalid email and password combination') + throw new GraphQLError('Invalid email and password combination') }, async signOut(_parent, _args, context, _info) { removeTokenCookie(context.res) diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/schema.js b/examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts similarity index 71% rename from examples/api-routes-apollo-server-and-client-auth/apollo/schema.js rename to examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts index f6d70b7e86243cf..0f14aa64f6cc896 100644 --- a/examples/api-routes-apollo-server-and-client-auth/apollo/schema.js +++ b/examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts @@ -1,4 +1,4 @@ -import { makeExecutableSchema } from 'graphql-tools' +import { makeExecutableSchema } from '@graphql-tools/schema' import { typeDefs } from './type-defs' import { resolvers } from './resolvers' diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.js b/examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.ts similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.js rename to examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.ts diff --git a/examples/api-routes-apollo-server-and-client-auth/components/field.js b/examples/api-routes-apollo-server-and-client-auth/components/field.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/components/field.js rename to examples/api-routes-apollo-server-and-client-auth/components/field.tsx diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.js b/examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.ts similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.js rename to examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.ts diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/auth.js b/examples/api-routes-apollo-server-and-client-auth/lib/auth.ts similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/lib/auth.js rename to examples/api-routes-apollo-server-and-client-auth/lib/auth.ts diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/form.js b/examples/api-routes-apollo-server-and-client-auth/lib/form.ts similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/lib/form.js rename to examples/api-routes-apollo-server-and-client-auth/lib/form.ts diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/user.js b/examples/api-routes-apollo-server-and-client-auth/lib/user.ts similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/lib/user.js rename to examples/api-routes-apollo-server-and-client-auth/lib/user.ts diff --git a/examples/api-routes-apollo-server-and-client-auth/package.json b/examples/api-routes-apollo-server-and-client-auth/package.json index 9494cd436ed93c4..761a5017cae697d 100644 --- a/examples/api-routes-apollo-server-and-client-auth/package.json +++ b/examples/api-routes-apollo-server-and-client-auth/package.json @@ -6,16 +6,24 @@ "start": "next start" }, "dependencies": { - "@apollo/client": "^3.0.2", + "@apollo/client": "^3.7.1", + "@apollo/server": "^4.1.1", + "@as-integrations/next": "^1.1.0", + "@graphql-tools/schema": "^9.0.9", + "graphql": "^16.6.0", "@hapi/iron": "6.0.0", - "apollo-server-micro": "^2.14.2", "cookie": "^0.4.1", "deepmerge": "4.2.2", - "graphql": "^14.0.2", "next": "latest", "prop-types": "^15.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", "uuid": "8.1.0" + }, + "devDependencies": { + "@types/node": "^18.0.2", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6", + "typescript": "^4.7.4" } } diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/_app.js b/examples/api-routes-apollo-server-and-client-auth/pages/_app.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/pages/_app.js rename to examples/api-routes-apollo-server-and-client-auth/pages/_app.tsx diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/about.js b/examples/api-routes-apollo-server-and-client-auth/pages/about.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/pages/about.js rename to examples/api-routes-apollo-server-and-client-auth/pages/about.tsx diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.js b/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.js deleted file mode 100644 index 1e85d8c07dde585..000000000000000 --- a/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.js +++ /dev/null @@ -1,17 +0,0 @@ -import { ApolloServer } from 'apollo-server-micro' -import { schema } from '../../apollo/schema' - -const apolloServer = new ApolloServer({ - schema, - context(ctx) { - return ctx - }, -}) - -export const config = { - api: { - bodyParser: false, - }, -} - -export default apolloServer.createHandler({ path: '/api/graphql' }) diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts b/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts new file mode 100644 index 000000000000000..6f8a37a9f17b67e --- /dev/null +++ b/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts @@ -0,0 +1,15 @@ +import { ApolloServer } from '@apollo/server' +import { startServerAndCreateNextHandler } from '@as-integrations/next' +import { NextApiRequest, NextApiResponse } from 'next' +import { schema } from '../../apollo/schema' + +type ExampleContext = { + req: NextApiRequest + res: NextApiResponse +} + +const apolloServer = new ApolloServer({ schema }) + +export default startServerAndCreateNextHandler(apolloServer, { + context: async (req, res) => ({ req, res }), +}) diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/index.js b/examples/api-routes-apollo-server-and-client-auth/pages/index.tsx similarity index 83% rename from examples/api-routes-apollo-server-and-client-auth/pages/index.js rename to examples/api-routes-apollo-server-and-client-auth/pages/index.tsx index dceed6e9878dbff..a700aae4d75cc6b 100644 --- a/examples/api-routes-apollo-server-and-client-auth/pages/index.js +++ b/examples/api-routes-apollo-server-and-client-auth/pages/index.tsx @@ -32,8 +32,9 @@ const Index = () => { if (viewer) { return (
- You're signed in as {viewer.email} goto about{' '} - page. or signout + You're signed in as {viewer.email}. Go to{' '} + about page or{' '} + signout.
) } diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signin.js b/examples/api-routes-apollo-server-and-client-auth/pages/signin.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/pages/signin.js rename to examples/api-routes-apollo-server-and-client-auth/pages/signin.tsx diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signout.js b/examples/api-routes-apollo-server-and-client-auth/pages/signout.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/pages/signout.js rename to examples/api-routes-apollo-server-and-client-auth/pages/signout.tsx diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signup.js b/examples/api-routes-apollo-server-and-client-auth/pages/signup.tsx similarity index 100% rename from examples/api-routes-apollo-server-and-client-auth/pages/signup.js rename to examples/api-routes-apollo-server-and-client-auth/pages/signup.tsx diff --git a/examples/api-routes-apollo-server-and-client-auth/tsconfig.json b/examples/api-routes-apollo-server-and-client-auth/tsconfig.json new file mode 100644 index 000000000000000..da3cc0ac32d36ce --- /dev/null +++ b/examples/api-routes-apollo-server-and-client-auth/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/about.js"], + "exclude": ["node_modules"] +}