https://www.devtoolsdaily.com/_next/static/chunks/pages/blog/mock-graphql-tool-a5957364dfa7dec9.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[44887],{47699:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/mock-graphql-tool",function(){return n(35486)}])},35486:function(e,s,n){"use strict";n.r(s),n.d(s,{__N_SSG:function(){return t},default:function(){return h},metadata:function(){return i}});var a=n(85893),l=n(91644),r=n(47185),t=!0;let i={slug:"mock-graphql-tool",date:"2023-09-24",metaTitle:"Unveiling the Mock GraphQL Tool",description:"Today, we present a closer look at our new tool: graphql-mock. This tool allows you to input your GraphQL schema and receive mock data based on your schema.",keywords:"graphql, mock, tools"},c=function(e){let{children:s}=e;return(0,a.jsx)(r.Z,{title:i.metaTitle,date:i.date,children:s})};function o(e){let s={a:"a",code:"code",h2:"h2",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["\uD83D\uDE80 ",(0,a.jsx)(s.strong,{children:"Exciting news!"})," Today, we present a closer look at our new tool: ",(0,a.jsx)(s.strong,{children:"graphql-mock"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["Find it at ",(0,a.jsx)(s.a,{href:"https://graphql-mock.devtoolsdaily.com",children:"graphql-mock.devtoolsdaily.com"}),". This tool allows you to input your GraphQL schema and receive mock data based on your schema."]}),"\n",(0,a.jsx)(s.p,{children:"Key Features:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"Customizable GraphiQL UI: Input your GraphQL schema and get corresponding mock data."}),"\n",(0,a.jsx)(s.li,{children:"Browser-Based: No backend setup required, and it generates shareable URLs."}),"\n",(0,a.jsx)(s.li,{children:"Uses: Showcase GraphQL queries, experiment with SDL, and understand GraphQL, all without a dedicated GraphQL server."}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"Usage:"}),"\n",(0,a.jsxs)(s.ol,{children:["\n",(0,a.jsxs)(s.li,{children:["Visit ",(0,a.jsx)(s.a,{href:"https://graphql-mock.devtoolsdaily.com",children:"https://graphql-mock.devtoolsdaily.com"})]}),"\n",(0,a.jsxs)(s.li,{children:["Access the 'Set SDL Schema' pane.\n",(0,a.jsx)(s.img,{src:"/blog-img/mock-graphql/1-open-edit-SDL-pane.png",alt:"open Set SDL Schema pane",title:"open Set SDL Schema pane"})]}),"\n",(0,a.jsxs)(s.li,{children:["Input your schema and click 'Save'.\n",(0,a.jsx)(s.img,{src:"/blog-img/mock-graphql/2-save-graphql-schema.png",alt:"set schema and click save",title:"set schema and click save"})]}),"\n",(0,a.jsxs)(s.li,{children:["Enter your query to receive mock data.\n",(0,a.jsx)(s.img,{src:"/blog-img/mock-graphql/3-write-query.png",alt:"write your query",title:"write your query"})]}),"\n",(0,a.jsx)(s.li,{children:"The browser URL updates as per your schema and query configurations for easy sharing."}),"\n"]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.h2,{children:"Technical Breakdown:"}),"\n",(0,a.jsxs)(s.ol,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"GraphiQL React Library"}),": This renders our GraphiQL UI."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"Mock API Integration"}),": Instead of pointing the Graphql UI to a standard backend, we use mock data. This handles both introspection queries and the custom user queries."]}),"\n"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-javascript",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"import"})," { makeExecutableSchema } ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'@graphql-tools/schema'"}),";\n",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"import"})," { addMocksToSchema } ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'@graphql-tools/mock'"}),"\n\n",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," schema = ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"makeExecutableSchema"}),"({\n  typeDefs\n});\n\n",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," schemaWithMocks = ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"addMocksToSchema"}),"({ schema })\n"]})}),"\n",(0,a.jsxs)(s.ol,{start:"3",children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"Connecting GraphQL with Mocked Schema"}),": GraphiQL uses a ",(0,a.jsx)(s.code,{children:"fetcher"})," function to execute queries."]}),"\n"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-javascript",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"fetcher"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"{ query, variables }"}),") {\n  ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"graphql"}),"({\n    ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"schema"}),": schemaWithMocks,\n    ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"source"}),": query\n})\n}\n\n<",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"GraphiQL"}),"  fetcher={fetcher}  />\n"]})}),"\n",(0,a.jsxs)(s.ol,{start:"4",children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"SDL Sc

1hema Editing in GraphiQL"}),": GraphiQL allows for plugins. Create a JSON object with the necessary fields and integrate it with GraphiQL."]}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"All you need to do is to create a JSON object with 3 fields, and pass it to GraphiQL."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-javascript",children:["  ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," editSdlPlugin = {\n    ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"title"}),": ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'Edit SDL'"}),",\n    ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"icon"}),": ",(0,a.jsx)(s.span,{className:"hljs-function",children:"() =>"})," (pencilIcon),\n    ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"content"}),": ",(0,a.jsx)(s.span,{className:"hljs-function",children:"() =>"})," ",(0,a.jsx)(s.span,{className:"xml",children:(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"EditSdlPlugin"})," />"]})}),"\n  }\n\n<",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"GraphiQL"}),"  fetcher={fetcher} plugins={[editSdlPlugin]} />\n\n"]})}),"\n",(0,a.jsxs)(s.ol,{start:"5",children:["\n",(0,a.jsx)(s.li,{children:"capturing state of Query and GraphQL schema in the URL."}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"GraphiQL takes some props:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"onEditQuery"})," - called when Query changed"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"defaultQuery"})," to set default Query shown when UI is first open. Using ",(0,a.jsx)(s.code,{children:"query"})," instead of ",(0,a.jsx)(s.code,{children:"defaultQuery"})," will result in an extra tab."]}),"\n"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-javascript",children:["<",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"GraphiQL"})," defaultQuery={defaultQuery} onEditQuery={",(0,a.jsxs)(s.span,{className:"hljs-function",children:[(0,a.jsx)(s.span,{className:"hljs-params",children:"editedQuery"})," =>"]})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"setQuery"}),"(editedQuery)}\n"]})}),"\n",(0,a.jsxs)(s.ol,{start:"6",children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.strong,{children:"State Compression"}),": Using `LZString``, we can compress larger objects into URL-friendly strings."]}),"\n"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-javascript",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"import"})," ",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"LZString"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'lz-string'"}),";\n\n",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"compress"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"s"}),") {\n  ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"LZString"}),".",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"compressToEncodedURIComponent"}),"(s);\n}\n"]})}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.p,{children:"Take it for a spin and let us know your feedback. \uD83D\uDE80"}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.a,{href:"https://graphql-mock.devtoolsdaily.com",children:"graphql-mock.devtoolsdaily.com"})})]})}function h(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(c,{...e,children:(0,a.jsx)(o,{...e})})}},47185:function(e,s,n){"use strict";n.d(s,{Z:function(){return o}});var a=n(85893),l=n(43078),r=n(9008),t=n.n(r),i=n(11163);n(48097);let c="https://www.devtoolsdaily.com";function o(e){let{date:s,children:n,title:r,useContainer:o=!0,articleSchema:h}=e,d=(0,i.useRouter)(),p=((null==d?void 0:d.asPath)||"").split("?")[0].split("#")[0],j="".concat(c).concat(p),m=h?JSON.stringify({"@context":"https://schema.org","@type":h.type||"TechArticle",headline:h.title,...h.description?{description:h.description}:{},...h.keywords?{keywords:h.keywords}:{},...h.date?{datePublished:h.date,dateModified:h.date}:{},mainEntityOfPage:{"@type":"WebPage","@id":j},author:{"@type":"Organization",name:"DevTools Daily",url:c},publisher:{"@type":"Organization",name:"DevTools Daily",url:c}}).replace(/</g,"\\u003c"):null,u=p.startsWith("/blog/")&&"/blog/"!==p&&"/blog"!==p?JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"DevTools Daily",item:"".concat(c,"/")},{"@type":"ListItem",position:2,name:"Blog",item:"".concat(c,"/blog/")},{"@type":"ListItem",position:3,name:r,item:j}]}).replace(/</g,"\\u003c"):null,x=o?(0,a.jsxs)(l.W,{className:"blog-article",children:[(0,a.jsx)("h1",{children:r}),(0,a.jsx)("div",{className:"text-sm italic date pb-1 pt-1",children:s}),n]}):(0,a.jsxs)("div",{className:"blog-article",children:[(0,a.jsx)("h1",{children:r}),n]});return(0,a.jsxs)(a.Fragment,{children:[(m||u)&&(0,a.jsxs)(t(),{children:[m&&(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:m}}),u&&(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:u}})]}),x]})}},91644:function(e,s,n){"use strict";function a(e){return{...e}}n.d(s,{a:function(){return a}})},48097:function(){},43078:function(e,s,n){"use strict";n.d(s,{W:function(){return j}});var a=n(85893);n(67294);var l=n(69429),r=n(13637),t=n(90987),i=n(46976),c=n(33583),o=n(9535),h={root:"m_7485cace"};let d={},p=(0,r.Z)((e,{size:s,fluid:n})=>({root:{"--container-size":n?void 0:(0,l.ap)(s,"container-size")}})),j=(0,o.d5)((e,s)=>{let n=(0,t.w)("Container",d,e),{classNames:l,className:r,style:o,styles:j,unstyled:m,vars:u,fluid:x,mod:g,...y}=n,f=(0,i.y)({name:"Container",classes:h,props:n,className:r,style:o,classNames:l,styles:j,unstyled:m,vars:u,varsResolver:p});return(0,a.jsx)(c.x,{ref:s,mod:[{fluid:x},g],...f("root"),...y})});j.classes=h,j.displayName="@mantine/core/Container"}},function(e){e.O(0,[92888,49774,40179],function(){return e(e.s=47699)}),_N_E=e.O()}]);