Recommended way to use GraphQL in Next.js app

Question

In my apps, I am using following NPM modules to play with Strapi, GraphQL and Next.js:

• react-apollo
• next-apollo
• graphql
• gql
• recompose

In the next step, I am creating Apollo config file, example below:

import { HttpLink } from "apollo-link-http";
import { withData } from "next-apollo";

const config = {
  link: new HttpLink({
    uri: "http://localhost:1337/graphql",
  })
};
export default withData(config);

and then inside a class component, I am using a static method getInitialProps() to fetch data from the Strapi via GraphQL query.

Everything is fine but maybe there is another, better way via React hooks or any other?

Answer 1

I have found one more interestng solution with using apollo-server-micro and lodash

Quick guide:

1. create Next.js app (example name: next-app) and install required packages

   npm i apollo-server-micro lodash
   

2. create required files in you Next.js app (next-app)

   • /next-app/pages/api/graphql/index.js
   • /next-app/pages/api/graphql/resolvers.js
   • /next-app/pages/api/graphql/typeDefs.js

3. add code to index.js

   import { ApolloServer } from 'apollo-server-micro';
   import resolvers from './resolvers';
   import typeDefs from './TypeDef';
   
   const apolloServer = new ApolloServer({
       typeDefs,
       resolvers,
   });
   
   export const config = {
       api: {
           bodyParser: false
       }
   };
   
   export default apolloServer.createHandler({ path: '/api/graphql' });
   

4. add code to typeDefs.js

   import { gql } from 'apollo-server-micro';
   
   const typeDefs = gql`
       type User {
           id: Int!
           name: String!
           age: Int
           active: Boolean!
       }
       type Query {
           getUser(id: Int): User
       }
   `;
   
   export default typeDefs;
   

5. add code to resolvers.js

   import lodash from 'lodash/collection';
   
   const users = [
       { id: 1, name: 'Mario', age: 38, active: true },
       { id: 2, name: 'Luigi', age: 40, active: true},
       { id: 3, name: 'Wario', age: 36, active: false }
   ];
   
   const resolvers = {
       Query: {
           getUser: (_, { id }) => {
               return lodash.find(users, { id });
           }
       }
   };
   
   export default resolvers;
   

6. test your Next.js app (next-app) by running below command and checking graphql URL http://localhost:3000/api/graphql

   npm run dev