https://graphql.org/_next/static/chunks/pages/graphql-js/graphql-clients-1af65138dcb12af6.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3592],{96063:function(i,s,h){(window.__NEXT_P=window.__NEXT_P||[]).push(["/graphql-js/graphql-clients",function(){return h(813)}])},813:function(i,s,h){"use strict";h.r(s),h.d(s,{useTOC:function(){return t}});var l=h(52676),e=h(92937),n=h(45043),a=h(79428),r=h(41751);function t(i){return[]}s.default=(0,e.c)(function(i){let s={a:"a",code:"code",p:"p",pre:"pre",span:"span",...(0,a.a)(),...i.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(s.p,{children:["Since a GraphQL API has more underlying structure than a REST API, there are more powerful clients like ",(0,l.jsx)(s.a,{href:"https://facebook.github.io/relay/",children:"Relay"})," which can automatically handle batching, caching, and other features. But you don’t need a complex client to call a GraphQL server. With ",(0,l.jsx)(s.code,{children:"graphql-http"}),", you can just send an HTTP POST request to the endpoint you mounted your GraphQL server on, passing the GraphQL query as the ",(0,l.jsx)(s.code,{children:"query"})," field in a JSON payload."]}),"\n",(0,l.jsxs)(s.p,{children:["For example, let’s say we mounted a GraphQL server on ",(0,l.jsx)(s.a,{href:"http://localhost:4000/graphql",children:"http://localhost:4000/graphql"})," as in the example code for ",(0,l.jsx)(s.a,{href:"/graphql-js/running-an-express-graphql-server/",children:"running an Express GraphQL server"}),", and we want to send the GraphQL query ",(0,l.jsx)(s.code,{children:"{ hello }"}),". We can do this from the command line with ",(0,l.jsx)(s.code,{children:"curl"}),". If you paste this into a terminal:"]}),"\n",(0,l.jsx)(s.pre,{icon:r.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"curl"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#F3F4F0"},children:" -X"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" POST"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#F3F4F0"},children:" \\"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"-H "}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Content-Type: application/json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#F3F4F0"},children:" \\"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"-d "}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:"'"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:'{"query": "{ hello }"}'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:"'"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#F3F4F0"},children:" \\"})]}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"http://localhost:4000/graphql"})})]})}),"\n",(0,l.jsx)(s.p,{children:"You should see the output returned as JSON:"}),"\n",(0,l.jsx)(s.pre,{tabIndex:"0","data-language":"json","data-word-wrap":"",children:(0,l.jsx)(s.code,{children:(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#DBF6A2"},children:"data"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":{"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#DBF6A2"},children:"hello"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Hello world!"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}}"})]})})}),"\n",(0,l.jsxs)(s.p,{children:["If you prefer to use a graphical user interface to send a test query, you can use clients such as ",(0,l.jsx)(s.a,{href:"https://github.com/graphql/graphiql",children:"GraphiQL"}),", ",(0,l.jsx)(s.a,{href:"https://github.com/getinsomnia/insomnia",children:"Insomnia"}),", and ",(0,l.jsx)(s.a,{href:"https://www.postman.com/product/graphql-client/",children:"Postman"}),"."]}),"\n",(0,l.jsxs)(s.p,{children:["It’s also simple to send GraphQL from the browser. Open up ",(0,l.jsx)(s.a,{href:"http://localhost:4000/gra

1phql",children:"http://localhost:4000/graphql"}),", open a developer console, and paste in:"]}),"\n",(0,l.jsx)(s.pre,{icon:r.Dr,tabIndex:"0","data-language":"js","data-word-wrap":"",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"fetch"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"/graphql"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"  method"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"POST"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"  headers"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'    "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Content-Type"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"application/json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"    Accept"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"application/json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  },"})}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"  body"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" JSON"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"stringify"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" query"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"{ hello }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  ."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"then"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"response"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:" =>"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:" response"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"}

1,children:"())"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  ."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"then"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"data"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:" =>"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:"    console"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"log"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Data returned:"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" data"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  ."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"catch"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"error"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:" =>"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:"    console"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"error"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Request failed:"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" error"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]})]})}),"\n",(0,l.jsx)(s.p,{children:"You should see the data returned, logged in the console:"}),"\n",(0,l.jsx)(s.pre,{tabIndex:"0","data-language":"text","data-word-wrap":"",children:(0,l.jsx)(s.code,{children:(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{children:'data returned: Object { hello: "Hello world!" }'})})})}),"\n",(0,l.jsxs)(s.p,{children:["In this example, the query was just a hardcoded string. As your application becomes more complex, and 

1you add GraphQL endpoints that take arguments as described in ",(0,l.jsx)(s.a,{href:"/graphql-js/passing-arguments/",children:"Passing Arguments"}),", you will want to construct GraphQL queries using variables in client code. You can do this by including a keyword prefixed with a dollar sign in the query, and passing an extra ",(0,l.jsx)(s.code,{children:"variables"})," field on the payload."]}),"\n",(0,l.jsxs)(s.p,{children:["For example, let’s say you’re running the example server from ",(0,l.jsx)(s.a,{href:"/graphql-js/passing-arguments/",children:"Passing Arguments"})," that has a schema of"]}),"\n",(0,l.jsx)(s.pre,{icon:r.Wo,tabIndex:"0","data-language":"graphql","data-word-wrap":"",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#990069","--shiki-dark":"#C2F653"},children:"type"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#FF99E0"},children:" Query"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#DBF6A2"},children:"  rollDice"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"numDice"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#FF99E0"},children:" Int"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:"!"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" numSides"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#FF99E0"},children:" Int"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" ["}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#FF99E0"},children:"Int"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"]"})]}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"})})]})}),"\n",(0,l.jsx)(s.p,{children:"You could access this from JavaScript with the code:"}),"\n",(0,l.jsx)(s.pre,{icon:r.Dr,tabIndex:"0","data-language":"js","data-word-wrap":"",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"const"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" dice"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:" ="}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#F3F4F0"},children:" 3"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"const"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" sides"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:" ="}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#F3F4F0"},children:" 6"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsx)(s.span,{children:" "}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"const"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" query"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:" ="}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#9FA88A","--shiki-light-font-style":"italic","--shiki-dark":"#737373","--shiki-dark-font-style":"inherit"},children:" /* GraphQL */"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:" `"})]}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"  query RollDice($dice: Int!, $sides: Int) {"})}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"    rollDice(numDice: $dice, numSides: $sides)"})}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"  }"})}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:"`"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsx)(s.span,{children:" "}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"fetch"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"/graphql"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"  method"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"POST"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"  headers"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'    "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Content-Type"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"application/json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"    Accept"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"application/json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsx)(s.span,{children:(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  },"})}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"  body"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" JSON"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"stringify"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:"    query"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"    variables"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" dice"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" sides"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" },"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  ."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"then"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"response"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:" =>"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:" response"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"json"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"}

1,children:"())"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  ."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"then"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"data"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:" =>"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:"    console"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"log"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Data returned:"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" data"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  ."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"catch"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"error"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:" =>"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:"    console"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"error"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"("}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"Request failed:"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" error"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]}),"\n",(0,l.jsxs)(s.span,{children:[(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"  }"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:")"}),(0,l.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:";"})]})]})}),"\n",(0,l.jsx)(s.p,{children:"Using this syntax for variables is a good idea because it automatically prevents bugs due to escaping, and it makes it easier to monitor your server."}),"\n",(0,l.jsx)(s.p,{children:"In general, it will take a bit more time to set up a GraphQL client like Relay, but it’s worth it to get more features as your application grows. You might want to start out just using HTTP requests as the underlying transport layer, and switching to a more complex client as your application gets more complex."}),"\n",(0,l.jsxs)(s.p,{children:["At this point you can write a client and server in GraphQL for an API that receives a single str

1ing. To do more, you will want to ",(0,l.jsx)(s.a,{href:"/graphql-js/basic-types/",children:"learn how to use the other basic data types"}),"."]})]})},"/graphql-js/graphql-clients",{filePath:"src/pages/graphql-js/graphql-clients.mdx",timestamp:1789481543e3,pageMap:n.v,frontMatter:{title:"GraphQL Clients"},title:"GraphQL Clients"},"undefined"==typeof RemoteContent?t:RemoteContent.useTOC)}},function(i){i.O(0,[3556,5043,2888,9774,179],function(){return i(i.s=96063)}),_N_E=i.O()}]);