Generate type information from gql graphql query using graphql code generator 
Published: 2021-11-08 11:40:21

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](https://myportfolioandblog.vercel.app/) 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 
```

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

```

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
      }
    }
  }
```

To make graphql request, we'll be using graphql-request so install it
 ```
 yarn add graphql-request graphql
 or 
 npm i graphql-request graphql
 ```
 
 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4sjnijrk8di5yzla97.png)
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
      }
    }
  }
`;

```

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",
```

After adding this run 
```
yarn gen
or 
npm run gen
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irzstbw5ec94n3dbs5c2.png)
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;

```

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.**