Nextjs GraphQL Fullstack

Setup GraphQL Server with Nextjs

Install required dependencies for GraphQL API

yarn add graphql graphql-yoga

Create a file named graphql.ts inside the pages/api directory

cd pages/api && touch graphql.ts

Import createYoga & createSchema from graphql-yoga package

import { createYoga, createSchema } from "graphql-yoga";

export the createYoga instance from the file with schema and graphqlEndpoint

export default createYoga<any>({
  schema: createSchema({ typeDefs, resolvers }),
  graphqlEndpoint: "/api/graphql",
});

Setup the GraphQL in client side

Install the required dependencies for client side

yarn add @apollo/client

Open the _app.tsx file and create new ApolloClient

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: "/api/graphql",
  cache: new InMemoryCache(),
});

Now change the return statement of _app.tsx file

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}