NextJS can make your website blazing fast. Thanks to the server side rendering, website of your single-page app is preloaded. However, despite being built on React, NextJS has some differences that make integrating GraphQL an unique challenge. I had a very hard time finding a tutorial like that so I decided to write one on my own. We'll explore
First, let's create our next app:
npx create-next-app
Give your app a name. We'll be running in a development environment with
npm run dev
Enter the project folder:
cd MyApp
Install the packages
npm install apollo-server-micro graphql apollo-boost graphql-tag @apollo/react-hooks
Backend
Inside the 'pages/api' create a file named 'graphql.js'. We'll create an apollo server on this endpont (NextJS will make an endpoint on 'api/graphql' for this server).
Let's define the type for query:
import { ApolloServer, gql } from "apollo-server-micro";
const typeDefs = gql`
type Query {
user: String,
email: String
}
`;
Now, let's create resolvers with dummy data. In another post we'll replace this with mongoose resolvers:
const test_user = 'jaguar'
const test_email = 'jaguar@gmail.com'
const resolvers = {
Query: {
user: () => test_user,
email: () => test_email,
},
};
Let's run the Apollo Server:
const apolloServer = new ApolloServer({
typeDefs,
resolvers,
context: () => {
return {};
}
});
const handler = apolloServer.createHandler({ path: "/api/graphql" });
Also make sure that this API route is not parsed and interpreted by NextJS. It has to be interpreted by the Apollo Server:
https://nextjs.org/docs/api-routes/api-middlewares#custom-config
Add the configuration:
export const config = {
api: {
bodyParser: false
}
};
The whole graphql.js file is now:
import { ApolloServer, gql } from "apollo-server-micro";
const typeDefs = gql`
type Query {
user: String,
email: String
}
`;
const test_user = 'jaguar'
const test_email = 'jaguar@gmail.com'
const resolvers = {
Query: {
user: () => test_user,
email: () => test_email,
},
};
const apolloServer = new ApolloServer({
typeDefs,
resolvers,
context: () => {
return {};
}
});
const handler = apolloServer.createHandler({ path: "/api/graphql" });
export const config = {
api: {
bodyParser: false
}
};
export default handler;
Frontend
In the 'pages/_app.js' import the Apollo Client and react hook:
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
point the Apollo Client instance to the Apollo Server:
const client = new ApolloClient({
uri: 'http://localhost:3000/api/graphql'
});
And add Apollo Provider wrapper for the Component:
function MyApp({ Component, pageProps }) {
return <ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
}
So the whole '_app.js' file is:
import '../styles/globals.css'
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
const client = new ApolloClient({
uri: 'http://localhost:3000/api/graphql'
});
function MyApp({ Component, pageProps }) {
return <ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
}
export default MyApp
Now let's use the data inside the 'index.js' file.
First, let's import the GraphQL query parser and useQuery hook:
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
Inside the 'Home' function we'll be resolving a query:
const USER_QUERY = gql`
{
user
email
}
`;
const { loading, error, data } = useQuery(USER_QUERY);
if (loading) {
return <p>Loading...</p>;
}
if (error) {
console.log(error)
return <p>Error :(</p>;
}
So we can use it inside 'main' component:
<p>
User is: {data.user}
</p>
<p>
Email is: {data.email}
</p>
Finally, the whole 'index.js' file is:
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
export default function Home() {
const USER_QUERY = gql`
{
user
email
}
`;
const { loading, error, data } = useQuery(USER_QUERY);
if (loading) {
return <p>Loading...</p>;
}
if (error) {
console.log(error)
return <p>Error :(</p>;
}
return (
<div className={styles.container}>
<Head>
<title>Create Next App with GraphQL</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className="App">
<header className="App-header">
<p>
User is: {data.user}
</p>
<p>
Email is: {data.email}
</p>
</header>
</div>
</main>
<footer className={styles.footer}>
</footer>
</div>
)
}
Let's check the browser at 'http://localhost:3000/'. You should see:
Voila! We successfully integrated GraphQL with NextJS. Next - integrating mongoose.
Let the good times roll!
