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 

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

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

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.