How to Set Up Apollo Server v4 in a Next.js Project

Apollo Server is a powerful tool for building GraphQL APIs, and with the release of Apollo Server v4, it’s more robust and easier to integrate than ever. This guide will walk you through setting up Apollo Server v4 in a Next.js project.

Step 1: Setting Up the Project

First, ensure you have a Next.js project set up. If not, create one using the following command:

npx create-next-app@latest my-apollo-server-app --typescript
cd my-apollo-server-app

Step 2: Installing Dependencies

Install Apollo Server along with GraphQL and other necessary packages:

npm install apollo-server-micro graphql
npm install --save-dev @types/node

Step 3: Setting Up Apollo Server

Create a new folder called graphql in the root of your project. Inside this folder, create a file named schema.ts and define your GraphQL schema:

// graphql/schema.ts

import { gql } from 'apollo-server-micro';

export const typeDefs = gql`
  type Query {
    hello: String
  }
`;

Next, create a file named resolvers.ts in the same folder and define your resolvers:

// graphql/resolvers.ts

export const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
};

Step 4: Creating the Apollo Server Handler

Now, set up the Apollo Server handler in a file called apollo.ts inside the pages/api folder:

// pages/api/apollo.ts

import { ApolloServer } from 'apollo-server-micro';
import { typeDefs } from '../../graphql/schema';
import { resolvers } from '../../graphql/resolvers';
import { NextApiRequest, NextApiResponse } from 'next';

const apolloServer = new ApolloServer({ typeDefs, resolvers });

const startServer = apolloServer.start();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await startServer;
  await apolloServer.createHandler({ path: '/api/graphql' })(req, res);
}

export const config = {
  api: {
    bodyParser: false,
  },
};

Step 5: Connecting Apollo Client

To interact with your GraphQL API, set up Apollo Client. Install Apollo Client and necessary packages:

npm install @apollo/client graphql

Create an ApolloProvider component in lib/apollo.ts:

// lib/apollo.ts

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

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

export function withApollo(PageComponent: any) {
  const WithApollo = (props: any) => (
    <ApolloProvider client={client}>
      <PageComponent {...props} />
    </ApolloProvider>
  );
  return WithApollo;
}

Step 6: Using Apollo Client in Components

Wrap your application in the ApolloProvider. Modify pages/_app.tsx:

// pages/_app.tsx

import { AppProps } from 'next/app';
import { withApollo } from '../lib/apollo';

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

export default withApollo(MyApp);

Now, you can use Apollo Client in your components. For example, create a simple query in pages/index.tsx:

// pages/index.tsx

import { gql, useQuery } from '@apollo/client';

const HELLO_QUERY = gql`
  query Hello {
    hello
  }
`;

const Home = () => {
  const { data, loading, error } = useQuery(HELLO_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <h1>{data.hello}</h1>;
};

export default Home;

Step 7: Testing the Setup

Run your application to test the Apollo Server setup:

npm run dev

Visit http://localhost:3000/api/graphql to access the GraphQL playground and test your API.

Conclusion

By following these steps, you’ve successfully set up Apollo Server v4 in a Next.js project. This setup provides a powerful foundation for building and interacting with GraphQL APIs, enhancing your application’s data-fetching capabilities.