{"id":368224,"date":"2023-02-13T09:55:30","date_gmt":"2023-02-13T09:55:30","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=368224"},"modified":"2026-02-26T13:41:01","modified_gmt":"2026-02-26T13:41:01","slug":"magento-graphql-apis-in-nextjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/","title":{"rendered":"How To Implement Magento GraphQl Api&#8217;s In NextJS"},"content":{"rendered":"\n<p>Initially, we will work on the <a href=\"https:\/\/webkul.com\/blog\/implementation-of-useform-hook-in-nextjs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Implementation of useForm() Hook in NextJS | React. <\/a> Now In this, we work on implementation of Magento GraphQl Api&#8217;s with NextJS. <\/p>\n\n\n\n<p>But before that we need to setup Apollo Client for managing the GraphQl Api&#8217;s.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/www.apollographql.com\/docs\/react\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Apollo Client<\/a> is a state management client which allow user to manage local and remote data with GraphQl and you can use it to cache, fetch, and also modify application data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1 : Install the Apollo client<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size\">Inside of your terminal run this command to install Apollo Client.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install @apollo\/client graphql<\/pre>\n\n\n\n<p class=\"has-medium-font-size\">This will add the both Apollo Client and GraphQl, which we\u2019ll need to implement the GraphQl Query.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2 : Set up the Apollo client in NextJS <\/strong>.<\/h2>\n\n\n\n<p>Create a file<strong> &#8220;lib\/apolloClient.js&#8221; <\/strong>for storing the Apollo Client configuration. In which we&#8217;ll be creating a basic function that returns an Apollo Client instance.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\"> import { useMemo } from &quot;react&quot;;\n import { ApolloClient, HttpLink, InMemoryCache } from &quot;@apollo\/client&quot;;\n\n let apolloClient;\n\n function createApolloClient() {\n   return new ApolloClient({\n     ssrMode: typeof window === &quot;undefined&quot;, \/\/ set to true for SSR\n     link: new HttpLink({\n       uri: &quot;YOUR MAGENTO-ENDPOINTS&quot;,\n     }),\n     cache: new InMemoryCache(),\n   });\n }<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SSR mode true allows to prevent Apollo Client unnecessarily re-fetching of queries,  Therefore we set the ssrMode should be true when page is pre-rendered using SSR (Server-Side rendering) but it needs to be false when client is rendered.  for achieving this we use typeof the window object to determine uniquely that Apollo client is running on client side or server side.<\/li>\n\n\n\n<li>Now we&#8217;ve  <strong>createApolloClient()<\/strong> function that returns the Apollo Client instances for given config. Apollo client will create the new instance for every page. because of that we&#8217;ll make a function <strong>initializeApollo()<\/strong> which calls the <strong>createApolloClient()<\/strong> function to create a new client in case  it doesn&#8217;t exit , unless we&#8217;ll merge the Apollo cache with the initialState (initialState !== null) which is the Apollo cache value that passed <strong><strong>in initializeApollo()<\/strong> <\/strong>function.<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">export function initializeApollo(initialState = null) {\n\n    const _apolloClient = apolloClient ?? createApolloClient();\n\n    \/* If your page has Next.js data fetching methods that use Apollo Client, the initial stategets hydrated here*\/ \n\n    if (initialState) {\n        \/\/ Get existing cache, loaded during client side data fetching\n        const existingCache = _apolloClient.extract();\n\n    \/* Restore the cache using the data passed from  \ngetStaticProps\/getServerSideProps combined with the existing \n    cached data *\/\n      _apolloClient.cache.restore({ ...existingCache, ...initialState});\n    }\n    \/\/ For SSG and SSR always create a new Apollo Client\n    if (typeof window === &#039;undefined&#039;) return _apolloClient;\n    \/\/ Create the Apollo Client once in the client\n    if (!apolloClient) apolloClient = _apolloClient;\n\n    return _apolloClient;\n}<\/pre>\n\n\n\n<p>We want Apollo client instance to be updated only when cache value is changed.<\/p>\n\n\n\n<p>To achieve this, we going to use the <strong>useMemo()<\/strong> hook. We make the useApollo() function which return the memoized value of the Apollo client().<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">export function useApollo(initialState) {\n    const store = \n    useMemo(() =&gt; initializeApollo(initialState),&#091;initialState]);\n    return store;\n}<\/pre>\n\n\n\n<p>export the client for SSR  use.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">export const client = initializeApollo();<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Passing the Apollo Client in Apollo Provider<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\">import { ApolloProvider } from &quot;@apollo\/client&quot;\nimport {useApollo} from &quot;..\/lib\/apollo-client&quot;\n\nexport default function App({ Component, pageProps }) {\n  const apolloClient = useApollo(pageProps.initialApolloState);\n  return (\n     &lt;ApolloProvider client={apolloClient}&gt;\n       &lt;Component {...pageProps} \/&gt;\n     &lt;\/ApolloProvider&gt;\n  )\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\">Now overall we completed the setup of Apollo client and furthermore we going to work on GraphQl Api&#8217;s. <\/p>\n\n\n\n<p>But Before starting to use GraphQl Api&#8217;s need to understand the basics of GraphQl for that you can visit <a href=\"https:\/\/graphql.org\/learn\/queries\/\" target=\"_blank\" rel=\"noreferrer noopener\">GraphQl Api&#8217;s<\/a>.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">And I also provided the basic guide below:<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>GraphQl Query and Mutations.<\/strong><\/p>\n\n\n\n<p>For using GraphQl Api&#8217;s we must need to be understand the concept of mutations and Query.<br><\/p>\n\n\n\n<p><strong>Query<\/strong> : It&#8217;s used for fetching data, just like the GET method in REST API.<br><\/p>\n\n\n\n<p><strong>Mutation <\/strong> : It&#8217;s used for changing the data just like the POST , DELETE , and PUT method in REST API.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ Query example\nquery Countries {\n  country {\n    \/\/ defining return data\n    name \n    code\n  }\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ Mutation example\nmutation loginUser($userName: String!, $password: String!) {\n  login(username: $userName, password: $password) {\n    \/\/ defining return data\n    id\n    email\n    firstname\n    outlet_id\n    lastname\n    filename\n    user_cart_item_list\n  }\n}<\/pre>\n\n\n\n<p>Now we completed  the apollo client and GraphQl  basics guide, only thing which left is using  implement magento GraphQl Api with our Form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implement the magento GraphQl  Api&#8217;s with NextJS<\/h2>\n\n\n\n<p><strong>Mutation for Create Customer Address<\/strong>.<br>In this mutation you also need to define the schema or you can say type of input values of createCustomerAddress.<\/p>\n\n\n\n<p>For that you follow this doc or blog<a href=\"https:\/\/www.apollographql.com\/docs\/apollo-server\/v2\/schema\/schema\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> Schema Basic and Types<\/a><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">mutation Create_Customer_Address($input: Create_Customer_Input!) {\n  createCustomerAddress(createCustomerAddressData: $input) {\n    id\n    region {\n      region\n      region_code\n    }\n    country_code\n    street\n    telephone\n    postcode\n    city\n    default_shipping\n    default_billing\n  }\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React, { useState, useEffect } from &quot;react&quot;;\nimport { useForm } from &quot;react-hook-form&quot;;\nimport Create_Customer_Address from &quot;..\/api\/createCustomerAddress.graphql&quot;\n\nconst LoginForm = () =&gt; {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors }, reset\n  } = useForm();\n\n  const &#091;formData, setFormData] = useState({});\n  const &#091;customerLogin, {data,error,loading] =   useMutation(Create_Customer_Address);\n\n  const formSubmit = (data) =&gt; {\n    setFormData( {...data} );\n    customerLogin(\n     variables: {input: formData},)\n  };\n\n\n   useEffect(() =&gt; {\n       if(data) {\n       alert(&quot;Customer Address is successfully created&quot;)\n       reset();\n   }\n },&#091;loading])\n\n  return (\n    &lt;form onSubmit={handleSubmit(formSubmit)}&gt;\n      &lt;div className=&quot;form-container&quot;&gt;\n        &lt;label className=&quot;label&quot;&gt;Account Information&lt;\/label&gt;\n        &lt;input\n          {...register(&quot;firstName&quot;, { required: true })}\n          placeholder=&quot;First name&quot;\n        \/&gt;\n\n        {errors.firstName &amp;&amp; &lt;p className=&quot;error&quot;&gt;First Name is required.&lt;\/p&gt;}\n\n        &lt;input\n          {...register(&quot;lastName&quot;, { required: true, minLength: 2 })}\n          placeholder=&quot;Last name&quot;\n        \/&gt;\n\n        {errors.lastName &amp;&amp; &lt;p className=&quot;error&quot;&gt;Last Name is required.&lt;\/p&gt;}\n        &lt;input\n          {...register(&quot;company&quot;, { required: true })}\n          placeholder=&quot;Company&quot;\n        \/&gt;\n\n        &lt;input\n          type=&quot;email&quot;\n          {...register(&quot;email&quot;, { required: true })}\n          placeholder=&quot;Email&quot;\n        \/&gt;\n        {errors.email &amp;&amp; &lt;p className=&quot;error&quot;&gt;Email address is required.&lt;\/p&gt;}\n\n        &lt;input\n          type=&quot;tel&quot;\n          {...register(&quot;phone&quot;, { required: true, valueAsNumber: true })}\n          placeholder=&quot;Phone Number&quot;\n        \/&gt;\n        {errors.phone &amp;&amp; &lt;p className=&quot;error&quot;&gt;Phone Number is required.&lt;\/p&gt;}\n\n        &lt;label className=&quot;label&quot;&gt;Address&lt;\/label&gt;\n\n        &lt;input\n          {...register(&quot;address&quot;, { required: true })}\n          placeholder=&quot;Street Address&quot;\n        \/&gt;\n        {errors.address &amp;&amp; &lt;p className=&quot;error&quot;&gt;Street Address is required.&lt;\/p&gt;}\n\n        &lt;input {...register(&quot;addressL2&quot;)} placeholder=&quot;Street Address 2&quot; \/&gt;\n        &lt;input {...register(&quot;addressL3&quot;)} placeholder=&quot;Street Address 3&quot; \/&gt;\n\n        {\/* &lt;input type=&quot;date&quot;  {...register(&quot;date&quot;, )} placeholder=&quot;date&quot; \/&gt;  *\/}\n\n        &lt;input {...register(&quot;city&quot;, { required: true })} placeholder=&quot;City&quot; \/&gt;\n        {errors.city &amp;&amp; &lt;p className=&quot;error&quot;&gt;City name is required.&lt;\/p&gt;}\n\n        &lt;input\n          {...register(&quot;zip&quot;, { required: true, valueAsNumber: true })}\n          placeholder=&quot;Zip&quot;\n        \/&gt;\n        {errors.zip &amp;&amp; &lt;p className=&quot;error&quot;&gt;Zip Code is required.&lt;\/p&gt;}\n\n        &lt;input\n          type=&quot;text&quot;\n          {...register(&quot;country&quot;, { required: true })}\n          placeholder=&quot;Country&quot;\n        \/&gt;\n        {errors.country &amp;&amp; &lt;p className=&quot;error&quot;&gt;Country name is required.&lt;\/p&gt;}\n\n        &lt;input\n          {...register(&quot;state&quot;, { required: true })}\n          placeholder=&quot;State\/Province&quot;\n        \/&gt;\n        {errors.country &amp;&amp; &lt;p className=&quot;error&quot;&gt;State\/Province is required.&lt;\/p&gt;}\n      &lt;\/div&gt;\n\n      &lt;div className=&quot;formData&quot;&gt;\n        &lt;input className=&quot;btn&quot; type=&quot;submit&quot; value=&quot;Save&quot; \/&gt;\n        &lt;div className=&quot;formValues&quot;&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.firstName}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.lastName}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.company}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.email}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.phone}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;\n            {formData.address} {formData.addressL2} {formData.addressL3}    {&quot; &quot;}\n          &lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.city}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.zip}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.country}&lt;\/p&gt;\n          &lt;p className=&quot;values&quot;&gt;{formData.state}&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/form&gt;\n  );\n};\n\nexport default LoginForm;<\/pre>\n\n\n\n<p class=\"has-medium-font-size\">Here we make the mutation of <strong>Create_Customer_Address<\/strong> in which we send the data of user. <\/p>\n\n\n\n<p class=\"has-medium-font-size\">And, after mutation get successfully called we called the <strong>alert() <\/strong>and reset the field method to indicate that user data is successfully added.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Query for get Customer Details.<\/strong><\/h3>\n\n\n\n<p>In this Query we get the detail of our customer. and we going to use <strong>useQuery()<\/strong> hook for execute our query.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">query Get_Customer_Details{\n  customer {\n    firstname\n    middlename\n    lastname\n    suffix\n    prefix\n    gender\n    date_of_birth\n    taxvat\n    created_at\n    default_shipping\n    default_billing\n    email\n    is_subscribed\n    addresses {\n      firstname\n      lastname\n      street\n      city\n      region {\n        region_code\n        region\n      }\n      postcode\n      vat_id\n      country_code\n      telephone\n      company\n    }\n  }\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React from &#039;react&#039;\nimport { useQuery } from &#039;@apollo\/client&#039;\nimport Get_Customer_Details from &quot;..\/api\/query\/getCustomerDetail.graphql&quot;;\n\nconst CustomerDetails = () =&gt; {\n\n    const {data, loading, error} = useQuery(Get_Customer_Details)\n\n  return (\n     &lt;React.Fragment&gt;\n    {loading ? (&lt;h1&gt;Loading&lt;\/h1&gt;) : (\n      &lt;h1&gt;{`${data.customer.firstname} ${data.customer.lastname}`}&lt;\/h1&gt;\n    )}\n    &lt;\/React.Fragment&gt;\n  )\n}\n\nexport default CustomerDetails;<\/pre>\n\n\n\n<p>so this is how you Implement Magento GraphQl Api&#8217;s with NextJS, <br>Stay tuned for more updates.<br>Learn more about our <a href=\"https:\/\/webkul.com\/magento-2-react-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 React Development Services<\/a>.<br><br>Happy Coding !!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Initially, we will work on the Implementation of useForm() Hook in NextJS | React. Now In this, we work on implementation of Magento GraphQl Api&#8217;s with NextJS. But before that we need to setup Apollo Client for managing the GraphQl Api&#8217;s. The Apollo Client is a state management client which allow user to manage local <a href=\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":495,"featured_media":470869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198,9121,13575,1],"tags":[1893,7085,2064,2070,12572,6359],"class_list":["post-368224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-magento-2","category-next-js","category-uncategorized","tag-frontend","tag-graphql","tag-javascript","tag-magento2","tag-next-js","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>NextJs | How To Implement Magento GraphQl Api&#039;s In NextJS | Webkul Blog<\/title>\n<meta name=\"description\" content=\"Implement the Magento GraphQl Api&#039;s using apollo client in NextJS, and implement methods like useQuery() Hook and useMutation() Hook.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NextJs | How To Implement Magento GraphQl Api&#039;s In NextJS | Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Implement the Magento GraphQl Api&#039;s using apollo client in NextJS, and implement methods like useQuery() Hook and useMutation() Hook.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-13T09:55:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T13:41:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"158\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Vishal Handa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vishal Handa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\"},\"author\":{\"name\":\"Vishal Handa\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94\"},\"headline\":\"How To Implement Magento GraphQl Api&#8217;s In NextJS\",\"datePublished\":\"2023-02-13T09:55:30+00:00\",\"dateModified\":\"2026-02-26T13:41:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\"},\"wordCount\":587,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"keywords\":[\"frontend\",\"graphQL\",\"JavaScript\",\"Magento2\",\"Next.js\",\"react js\"],\"articleSection\":[\"JavaScript\",\"Magento 2\",\"next js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\",\"name\":\"NextJs | How To Implement Magento GraphQl Api's In NextJS | Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"datePublished\":\"2023-02-13T09:55:30+00:00\",\"dateModified\":\"2026-02-26T13:41:01+00:00\",\"description\":\"Implement the Magento GraphQl Api's using apollo client in NextJS, and implement methods like useQuery() Hook and useMutation() Hook.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"width\":300,\"height\":158,\"caption\":\"magento graphql api's in nextjs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Implement Magento GraphQl Api&#8217;s In NextJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94\",\"name\":\"Vishal Handa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vishal Handa\"},\"description\":\"Vishal Handa is a Software Engineer specializing in the Akeneo platform with expertise in PIM API Development and payment gateway integration services. Skilled in REST APIs, BackboneJS, and PostgreSQL, Vishal crafts seamless, high-performance solutions that enhance digital commerce and streamline data management.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/vishal-handa658\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"NextJs | How To Implement Magento GraphQl Api's In NextJS | Webkul Blog","description":"Implement the Magento GraphQl Api's using apollo client in NextJS, and implement methods like useQuery() Hook and useMutation() Hook.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"NextJs | How To Implement Magento GraphQl Api's In NextJS | Webkul Blog","og_description":"Implement the Magento GraphQl Api's using apollo client in NextJS, and implement methods like useQuery() Hook and useMutation() Hook.","og_url":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-02-13T09:55:30+00:00","article_modified_time":"2026-02-26T13:41:01+00:00","og_image":[{"width":300,"height":158,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","type":"image\/webp"}],"author":"Vishal Handa","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Vishal Handa","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/"},"author":{"name":"Vishal Handa","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94"},"headline":"How To Implement Magento GraphQl Api&#8217;s In NextJS","datePublished":"2023-02-13T09:55:30+00:00","dateModified":"2026-02-26T13:41:01+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/"},"wordCount":587,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","keywords":["frontend","graphQL","JavaScript","Magento2","Next.js","react js"],"articleSection":["JavaScript","Magento 2","next js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/","url":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/","name":"NextJs | How To Implement Magento GraphQl Api's In NextJS | Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","datePublished":"2023-02-13T09:55:30+00:00","dateModified":"2026-02-26T13:41:01+00:00","description":"Implement the Magento GraphQl Api's using apollo client in NextJS, and implement methods like useQuery() Hook and useMutation() Hook.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","width":300,"height":158,"caption":"magento graphql api's in nextjs"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento-graphql-apis-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Implement Magento GraphQl Api&#8217;s In NextJS"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94","name":"Vishal Handa","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vishal Handa"},"description":"Vishal Handa is a Software Engineer specializing in the Akeneo platform with expertise in PIM API Development and payment gateway integration services. Skilled in REST APIs, BackboneJS, and PostgreSQL, Vishal crafts seamless, high-performance solutions that enhance digital commerce and streamline data management.","url":"https:\/\/webkul.com\/blog\/author\/vishal-handa658\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/368224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/495"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=368224"}],"version-history":[{"count":29,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/368224\/revisions"}],"predecessor-version":[{"id":528469,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/368224\/revisions\/528469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/470869"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=368224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=368224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=368224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}