In this blog, we are about to explore the introduction of GraphQL CodeGen and its advantages.<\/p>\n\n\n\n
After that, we will move toward the intricate configuration of GraphQL Codegen with apollo-client for our next js project.<\/a><\/p>\n\n\n\n Also, look no further and grab the opportunity to start your Magento 2 React development<\/a> with the certified Magento 2 development company<\/a>.<\/p>\n\n\n\n GraphQL Codegen is a tool that simplifies working with GraphQL APIs in TypeScript by automatically generating types and queries based on our schema.<\/p>\n\n\n\n It reduces the amount of boilerplate code you have to write and makes it easier to work with GraphQL APIs.<\/p>\n\n\n\n To use it, we would define our schema in a .graphql or .graphqls file and then use a codegen plugin to generate the TypeScript types and queries which we are about to cover deeper.<\/p>\n\n\n\n The generated code includes interfaces for your GraphQL types and functions for making queries and mutations.<\/p>\n\n\n\n GraphQL Code Generator simplifies your development process by automatically creating typed queries, mutations, and subscriptions.<\/p>\n\n\n\n These are created for front-end libraries like React, Next.js, and other various frameworks & libraries.<\/p>\n\n\n\n Whether you use Apollo Client, URQL, or React Query, it ensures consistent and type-safe code.<\/p>\n\n\n\n Manually managing GraphQL operation types can lead to issues like outdated typings and typos. <\/p>\n\n\n\n By automating this process, GraphQL Code Generator enhances the stability of your stack and improves the developer experience.<\/p>\n\n\n\n Without GraphQL Code Generator, developers often write repetitive code for queries and mutations. <\/p>\n\n\n\n By analyzing your GraphQL schema, the tool generates fully typed code, eliminating the need for manual TypeScript type maintenance and enhancing your development workflow.<\/p>\n\n\n\n While GraphQL Code Generator supports TypeScript by default, it can also generate code for other languages. <\/p>\n\n\n\n It automates common data fetching practices and improves type safety in code that would typically be manually written.<\/p>\n\n\n\n Our main focus will be on configuring GraphQL Codegen with Apollo Client in a Next.js environment. We assume you are familiar with setting up Apollo Client in a Next.js project. If not, you can refer to the Apollo client configuration with the Next.js blog for more insights. Let’s go with the steps to configure Apollo Client with GraphQL Codegen in a Next.js application.<\/p>\n\n\n\n Install the necessary dependencies for Apollo Client, GraphQL, and GraphQL Codegen.<\/p>\n\n\n\n Initialize Apollo Client in your Next.js application. Create a new file named client.ts in the lib directory.<\/p>\n\n\n\n In your Next.js app, wrap your pages with the Apollo Provider.<\/p>\n\n\n\n Create a codegen.ts file in the root directory of your project and define the configuration with our graphql server endpoint for GraphQL Codegen:<\/p>\n\n\n\n Now we need to create queries and mutations in our graphql folder as configured in our codegen.ts. Here graphql directory holds all queries and mutations files, here our products.query.graphql will be there for fetching the products list, likewise, we can also create a mutation in the same directory.<\/p>\n\n\n\n To generate TypeScript types and React Apollo hooks from your GraphQL queries and mutations. we use this below this command.<\/p>\n\n\n\n But instead of using this command, we can configure this command into package.json file, <\/p>\n\n\n\n Here we have addedgraphql-codegen –config codegen.ts<\/em> , this command will execute while we make the build using npm run build <\/strong>or whenever we run npm run generate<\/strong>.<\/p>\n\n\n\n After hitting the command, our hooks will be generated into a generated directory with graphql.tsx contains a bunch of hooks.\u00a0<\/p>\n\n\n\n However, we can also change where we have to generate this directory, it is generated as our configurated codegen.ts file.<\/p>\n\n\n\n Now, let’s demonstrate how to use the generated hooks for query data in your project. Now we can see our data in console.log<\/p>\n\n\n\n Finally, our project structure will look like this.<\/p>\n\n\n\n In conclusion, combining GraphQL code generation<\/a> with Apollo Client and Next.js can significantly improve the development process.<\/p>\n\n\n\n By utilizing code generation, we can ensure type safety and reduce manual errors in your GraphQL queries and mutations.<\/p>\n\n\n\n Apollo Client provides a robust set of tools for working with GraphQL APIs, including caching and real-time updates, while Next.js offers server-side rendering and performance optimizations.<\/p>\n\n\n\n Together, these technologies create a powerful stack for building efficient and scalable web applications with GraphQL.<\/p>\n\n\n\n You can also have a look at our Magento 2 extensions<\/a> already crafted by certified Adobe Commerce Developers.<\/p>\n\n\n\n For a personalized experience, hire Magento developers <\/a>who can dedicatedly work on your customised e-commerce projects.<\/p>\n","protected":false},"excerpt":{"rendered":"Introduction of CodeGen<\/h2>\n\n\n\n
Advantages of CodeGen \u2013<\/h2>\n\n\n\n
1. Automated Code Generation: <\/strong><\/h3>\n\n\n\n
2. Type Safety and Consistency:<\/strong><\/h3>\n\n\n\n
3. Efficient Workflow:<\/strong> <\/h3>\n\n\n\n
4. Broad Language Support:<\/strong> <\/h3>\n\n\n\n
Configuration Apollo client with Graphql Code-Gen \u2013<\/h2>\n\n\n\n
To set up, we can follow this setup next js project blog that covers all about the setup.<\/p>\n\n\n\n
<\/p>\n\n\n\nStep 1: Start by creating a new Next.js application:<\/strong><\/h3>\n\n\n\n
npx create-next-app@latest \ncd next_codegen<\/pre>\n\n\n\n
Step 2: Installing Dependencies<\/strong><\/h3>\n\n\n\n
npm install @apollo\/client graphql @graphql-codegen\/cli @graphql-codegen\/typescript @graphql-codegen\/typescript-operations @graphql-codegen\/typescript-react-apollo<\/pre>\n\n\n\n
Step 3: Initialising Apollo Client<\/strong><\/h3>\n\n\n\n
\/\/ lib\/client.ts\nimport { ApolloClient, InMemoryCache } from '@apollo\/client';\n\/\/ change the schema's uri with our graphql server end point\nexport const client = new ApolloClient({\n uri: 'https:\/\/magento-endpoint\/graphql',\n cache: new InMemoryCache(),\n});<\/pre>\n\n\n\nStep 4: Integrating with Next.js<\/strong><\/h3>\n\n\n\n
\/\/ pages\/_app.js\n\nimport "@\/styles\/globals.css";\nimport type { AppProps } from "next\/app";\nimport { client } from '@\/lib\/client';\nimport { ApolloProvider } from '@apollo\/client';\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n <ApolloProvider client={client}>\n <Component {...pageProps} \/>\n <\/ApolloProvider>\n );\n}<\/pre>\n\n\n\nStep 5: Configuring GraphQL Codegen<\/strong><\/h3>\n\n\n\n
\/\/ codegen.ts \n\/\/ change the schema's uri with our graphql server end point\nmodule.exports = {\n overwrite: true,\n schema:'https:\/\/magento-endpoint\/graphql',\n documents: [\n 'graphql\/**\/*.graphql',\n ],\n generates: {\n 'generated\/graphql.tsx': {\n plugins: [\n 'typescript',\n 'typescript-operations',\n 'typescript-react-apollo'\n ]\n }\n }\n };<\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n\n\/\/ graphql\/products.query.graphql\nquery Products(\n $filters: ProductAttributeFilterInput\n $search: String\n $pageSize: Int = 20\n $currentPage: Int = 1\n) {\n products(\n filter: $filters\n pageSize: $pageSize\n currentPage: $currentPage\n search: $search\n ) {\n aggregations {\n attribute_code\n label\n options {\n count\n label\n value\n }\n }\n total_count\n page_info {\n current_page\n page_size\n total_pages\n }\n items {\n uid\n name\n url_key\n sku\n new_from_date\n only_x_left_in_stock\n rating_summary\n description {\n html\n }\n thumbnail {\n disabled\n label\n position\n url\n }\n short_description {\n html\n }\n price_range {\n maximum_price {\n discount {\n amount_off\n percent_off\n }\n final_price {\n currency\n value\n }\n regular_price {\n currency\n value\n }\n }\n }\n }\n }\n}<\/pre>\n\n\n\nStep 6: Generating Queries and Mutations<\/strong><\/h3>\n\n\n\n
\nnpx graphql-codegen --config codegen.ts<\/pre>\n\n\n\n
"scripts": {\n "dev": "next dev",\n "build": "next build && graphql-codegen --config codegen.ts",\n "start": "next start",\n "lint": "next lint",\n "generate":"graphql-codegen --config codegen.ts"\n },<\/pre>\n\n\n\n\/\/ codegen.ts \n\/\/ change the schema's uri with our graphql server end point\nmodule.exports = {\n overwrite: true,\n schema:'https:\/\/magento-endpoint\/graphql',\n documents: [\n ...\n ],\n generates: {\n ...\n }\n };<\/pre>\n\n\n\nStep 7: Example Usage<\/strong><\/h3>\n\n\n\n
For instance, in your pages\/index.js.<\/p>\n\n\n\n\nimport { useProductsLazyQuery } from '@\/generated\/graphql';\nimport { useEffect } from 'react';\n\nexport default function Home() {\n\n const [getPosProduct,{ data, loading, error } ]= useProductsLazyQuery();\n\n useEffect(() => {\n getPosProduct({\n variables: {\n search: '',\n pageSize: 20,\n currentPage: 1\n },\n });\n }, []);\n\n if (loading) return <p>Loading...<\/p>\n if (error?.message) return <p>{error.message}<\/p>\n\n else {\n return (\n <>\n <main className={''}>\n {\/* populate the product list *\/}\n <\/main>\n <\/>\n );\n }\n}<\/pre>\n\n\n\nNEXT_CODEGEN\/\n\u251c\u2500\u2500 generated\/\n\u2502 \u2514\u2500\u2500 graphql.tsx\n\u251c\u2500\u2500 graphql\/\n\u2502 \u2514\u2500\u2500 products.query.graphql\n\u251c\u2500\u2500 lib\/\n\u2502 \u2514\u2500\u2500 client.ts\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 pages\/\n\u2502 \u251c\u2500\u2500 api\/\n\u2502 \u251c\u2500\u2500 _app.tsx\n\u2502 \u251c\u2500\u2500 _document.tsx\n\u2502 \u2514\u2500\u2500 index.tsx\n\u251c\u2500\u2500 public\/\n\u2502 \u251c\u2500\u2500 favicon.ico\n\u2502 \u251c\u2500\u2500 next.svg\n\u2502 \u2514\u2500\u2500 vercel.svg\n\u251c\u2500\u2500 styles\/\n\u2502 \u251c\u2500\u2500 globals.css\n\u2502 \u2514\u2500\u2500 Home.module.css\n\u251c\u2500\u2500 .eslintrc.json\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 codegen.ts\n\u251c\u2500\u2500 next-env.d.ts\n\u251c\u2500\u2500 next.config.mjs\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u2514\u2500\u2500 tsconfig.json<\/pre>\n\n\n\n
Conclusion<\/h2>\n\n\n\n