DEV Community

Bishal Neupane
Bishal Neupane

Posted on

Generate type information from gql graphql query using graphql code generator

This is the third blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In the last blog, we created the content-type that we would need in our application and also wrote a simple graphql query that would get us all the data required for our landing page.
In this blog post, we are going to add a graphql code generator to generate type information from our gql graphql queries that we will be writing. Having type information is very helpful during development and saves a lot of time from not having to make simple type mistakes.

So first thing first go to your nextjs project and run

yarn add -D @graphql-codegen/cli @graphql-codegen/gql-tag-operations-preset @graphql-codegen/typescript-operations 
or
npm i -D @graphql-codegen/cli @graphql-codegen/gql-tag-operations-preset @graphql-codegen/typescript-operations 
Enter fullscreen mode Exit fullscreen mode

Now, create a new file in the project root and name it codegen.yaml and paste the following

overwrite: true
schema: 'http://localhost:1337/graphql'
documents:
  - 'src/**/*.ts'
  - '!src/gql/**/*'
generates:
  src/gql/:
    preset: gql-tag-operations-preset
    plugins:
      - typescript
      - typescript-operations

Enter fullscreen mode Exit fullscreen mode

With this in place, let's issue the same query that we had in the last post that is

 query HomePage {
    homepage {
      Hero {
        title
        navlinks
        profile {
          url
        }
      }
      About {
        work
        blogs
        watch
        email
      }
      Project {
        title
        description
        tools
        image {
          url
        }
        url
        bg {
          url
        }
      }
      Contact {
        email
        insta
        linkedin
        twitter
        youtube
        title
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

To make graphql request, we'll be using graphql-request so install it

 yarn add graphql-request graphql
 or 
 npm i graphql-request graphql
Enter fullscreen mode Exit fullscreen mode

Now let create a folder src and move the pages and styles to src. also, create query and gql folder inside src folder
Image description
Now inside the queries folder add a file named homepage.ts and paste the following code

import { gql } from 'graphql-request';

export const exQuery = gql`
  query HomePage {
    homepage {
      Hero {
        title
        navlinks
        profile {
          url
        }
      }
      About {
        work
        blogs
        watch
        email
      }
      Project {
        title
        description
        tools
        image {
          url
        }
        url
        bg {
          url
        }
      }
      Contact {
        email
        insta
        linkedin
        twitter
        youtube
        title
      }
    }
  }
`;

Enter fullscreen mode Exit fullscreen mode

To generate the type information we have to use the graphql codegen cli tool so let's add a script to package.json

"gen": "yarn graphql-codegen --watch",
Enter fullscreen mode Exit fullscreen mode

After adding this run

yarn gen
or 
npm run gen
Enter fullscreen mode Exit fullscreen mode

This will run the graphql-codegen on watch mode and generate the type information from any exQuery that we've added. To confirm that we can see new files being added to the gql folder as
Image description
With that now let's use this query inside our nextjs page
So, replace the code in your index.ts with the following

import type { NextPage } from 'next';
import { request } from 'graphql-request';
import { exQuery } from '../queries/homepage';
import { HomePageQuery } from '../gql/graphql';
import { useEffect, useState } from 'react';

const Home: NextPage = () => {
  const [data, setData] = useState<HomePageQuery>();
  const query = async () => {
    const data: HomePageQuery = await request(
      'http://localhost:1337/graphql',
      exQuery
    );
    setData(data);
  };
  useEffect(() => {
    query();
  }, []);
  console.log(data?.homepage?.About?.blogs);
  return (
    <div>
      <p className='font-bold italic'>This is tailwindcss</p>
    </div>
  );
};

export default Home;

Enter fullscreen mode Exit fullscreen mode

Now we get that nice autocompletion all thanks to the graphql code gen.

This is it for generating the type information from gql graphql query. In another blog post, we'll create our landing page.
If you have any problem with this setup and then let me know in the discussion.

Top comments (0)