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.
Top comments (0)