1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6909],{23356:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var a=n(85893),s=n(11151);const i={id:"ui-gql-playground",title:"GraphQL Playground",sidebar_label:"GraphQL Playground",slug:"/lowcode/ui-gql-playground"},o=void 0,r={id:"lowcode/ui-gql-playground",title:"GraphQL Playground",description:"1. On the Hypi platform, you can execute various GraphQL methods with GraphQL playground. Click on API Instances. Select the instance from the list of instances. Select Playground tab.",source:"@site/src/markdown/lowcode/ui-gql-playground.md",sourceDirName:"lowcode",slug:"/lowcode/ui-gql-playground",permalink:"/docs/lowcode/ui-gql-playground",draft:!1,unlisted:!1,editUrl:"https://github.com/hypi-universe/website/tree/main/packages/create-docusaurus/templates/shared/src/markdown/lowcode/ui-gql-playground.md",tags:[],version:"current",frontMatter:{id:"ui-gql-playground",title:"GraphQL Playground",sidebar_label:"GraphQL Playground",slug:"/lowcode/ui-gql-playground"},sidebar:"docs",previous:{title:"GraphQL configuration of an Instance",permalink:"/docs/lowcode/ui-gql-config"},next:{title:"Data Migration",permalink:"/docs/lowcode/ui-data-migration"}},l={},c=[];function d(e){const t={a:"a",code:"code",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsxs)(t.li,{children:["On the Hypi platform, you can execute various GraphQL methods with ",(0,a.jsx)(t.code,{children:"GraphQL playground"}),". Click on ",(0,a.jsx)(t.code,{children:"API Instances"}),". Select the instance from the list of instances. Select ",(0,a.jsx)(t.code,{children:"Playground"})," tab."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(22066).Z+"",width:"1844",height:"841"})}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsxs)(t.li,{children:["A sample FindAccount query is always present in the starting tab. Click on the ",(0,a.jsx)(t.code,{children:"+"})," button to add a new tab to execute a method."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(32912).Z+"",width:"1559",height:"782"})}),"\n",(0,a.jsxs)(t.ol,{start:"3",children:["\n",(0,a.jsxs)(t.li,{children:["Note that ",(0,a.jsx)(t.code,{children:"HTTP request headers"})," get automatically added. The same request headers are present in the ",(0,a.jsx)(t.a,{href:"/docs/lowcode/ui-instance-api-config",children:"API configurations"})," of the instance."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(81233).Z+"",width:"930",height:"648"})}),"\n",(0,a.jsxs)(t.ol,{start:"4",children:["\n",(0,a.jsxs)(t.li,{children:["Write the method. Enter input data under the ",(0,a.jsx)(t.code,{children:"QUERY VARIABLES"})," tab. Hit the ",(0,a.jsx)(t.code,{children:"blue play button"})," to execute the method. You will get the response on the right-hand side box."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(14484).Z+"",width:"1566",height:"856"})}),"\n",(0,a.jsxs)(t.ol,{start:"5",children:["\n",(0,a.jsxs)(t.li,{children:["You can check the history of executed methods (APIs) by clicking the ",(0,a.jsx)(t.code,{children:"History"})," button."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(97979).Z+"",width:"1555",height:"139"})}),"\n",(0,a.jsxs)(t.ol,{start:"6",children:["\n",(0,a.jsxs)(t.li,{children:["Select the method and click the ",(0,a.jsx)(t.code,{children:"Use"})," button to again insert the method in a tab on GraphQL Playground."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(67201).Z+"",width:"1181",height:"608"})}),"\n",(0,a.jsxs)(t.ol,{start:"7",children:["\n",(0,a.jsxs)(t.li,{children:["You may correct the improperly formatted code with ",(0,a.jsx)(t.code,{children:"Prettify"})," button"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(84523).Z+"",width:"717",height:"261"})}),"\n",(0,a.jsxs)(t.ol,{start:"8",children:["\n",(0,a.jsxs)(t.li,{children:["The brackets get aligned properly with ",(0,a.jsx)(t.code,{children:"Prettify"}),"."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(24178).Z+"",width:"685",height:"265"})}),"\n",(0,a.jsxs)(t.ol,{start:"9",children:["\n",(0,a.jsxs)(t.li,{children:["You may see the endpoint in a box to make an HTTP request. You may refresh the instance by clicking refresh symbol in front of it. Click ",(0,a.jsx)(t.code,{children:"Copy CURL"})," to copy the HTTP request."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GQLPlay",src:n(83109).Z+"",width:"1559",height:"128"})}),"\n",(0,a.jsxs)(t.p,{children:["Paste the copied ",(0,a.jsx)(t.code,{children:"CURL"})," to verify the request."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:'curl \'https://api.alpha.hypi.dev/graphql\' -H \'Accept-Encoding: gzip, deflate, br\' -H \'Content-Type: application/json\' -H \'Accept: application/json\' -H \'Connection: keep-alive\' -H \'DNT: 1\' -H \'Origin: https://alpha.hypi.dev\' -H \'Authorization: <Auth Key>
1\' -H \'hypi-domain: ignorant.apps.hypi.app\' --data-binary \'{"query":"mutation Upsert($values: HypiUpsertInputUnion!) {\\n upsert(values: $values) {\\n id\\n }\\n}\\n","variables":{"values":{"Author":[{"name":"Dan Brown","age":56,"booklist":[{"title":"Da Vinci Code","publication":"abc","available":true}]}]}}}\' --compressed\n'})})]})}function h(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},22066:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-1-dab7f0f5ad80f1e33f52fa9fd6662af5.PNG"},32912:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-2-c5dac0ea08ecf0a1f003dced27b02b90.PNG"},81233:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-3-964da4cc92550d042ab68a627df0922a.PNG"},14484:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-4-5e843577e328bc6a10ce9eea3218a2a3.PNG"},97979:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-5-b91df0ffc54f718af7a73510bd2e3d7d.PNG"},67201:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-6-8135f347a1324bdeeb70a259afcba038.PNG"},84523:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-7-581e7998df8b017db780a2a87ebf19a2.PNG"},24178:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-8-fe3258641b35eb42d896b00df5922e93.PNG"},83109:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/UI-GQL-Play-9-48ce9b64150950549e83cfd527ac42c6.PNG"},11151:(e,t,n)=>{n.d(t,{Z:()=>r,a:()=>o});var a=n(67294);const s={},i=a.createContext(s);function o(e){const t=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),a.createElement(i.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.