1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8986],{83636:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var a=n(85893),r=n(11151),s=n(74866),o=n(85162);const i={id:"gql-introduction",title:"GraphQL Introduction",sidebar_label:"GraphQL Introduction",slug:"/lowcode/gql-introduction"},l=void 0,u={id:"lowcode/gql-introduction",title:"GraphQL Introduction",description:"What is GraphQL?",source:"@site/src/markdown/lowcode/gql-introduction.md",sourceDirName:"lowcode",slug:"/lowcode/gql-introduction",permalink:"/docs/lowcode/gql-introduction",draft:!1,unlisted:!1,editUrl:"https://github.com/hypi-universe/website/tree/main/packages/create-docusaurus/templates/shared/src/markdown/lowcode/gql-introduction.md",tags:[],version:"current",frontMatter:{id:"gql-introduction",title:"GraphQL Introduction",sidebar_label:"GraphQL Introduction",slug:"/lowcode/gql-introduction"},sidebar:"docs",previous:{title:"GraphQL Overview",permalink:"/docs/lowcode/graphql"},next:{title:"GraphQL Schema and Types",permalink:"/docs/lowcode/gql-schema-types"}},c={},d=[{value:"What is GraphQL?",id:"what-is-graphql",level:2},{value:"Why GraphQL?",id:"why-graphql",level:2},{value:"Ship Apps faster adopting GraphQL and Hypi",id:"ship-apps-faster-adopting-graphql-and-hypi",level:3},{value:"Explore your API",id:"explore-your-api",level:3}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"what-is-graphql",children:"What is GraphQL?"}),"\n",(0,a.jsx)(t.p,{children:"GraphQL was created by Facebook to enhance RESTful API calls."}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"GraphQL"})," makes getting server information much more comfortable and a lot faster. A GraphQL ",(0,a.jsx)(t.code,{children:"query"})," gets parsed to a string. The string is sent to a server to be interpreted and fulfilled. The server returns JSON to the client."]}),"\n","\n","\n",(0,a.jsxs)(s.Z,{defaultValue:"query",values:[{label:"GraphQL Query",value:"query"},{label:"Response",value:"response"}],children:[(0,a.jsx)(o.Z,{value:"query",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"{\n Songs {\n name\n # Queries can have comments!\n author\n year\n }\n} \n"})})}),(0,a.jsx)(o.Z,{value:"response",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-json",children:'{\n "data": {\n "songs": [\n {\n "name": "It\'s A Beautiful Day",\n "author": "Queen",\n "year":"1995",\n },\n {\n "name": "Let\'s Make A Night To Remember",\n "author": "Bryan Adams",\n "year": "1996"\n }\n ]\n }\n \n }\n'})})})]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"GraphQL queries mirror their response"}),", making it easy to predict the shape of the data returned from a query. It is also easy to write a query if you know the data your app needs."]}),"\n",(0,a.jsx)(t.p,{children:"GraphQL is unapologetic in its approach. It is driven by the data requirements of products and developers who build the products. Because of the predictability of GraphQL, it's easy to learn and use."}),"\n",(0,a.jsx)(t.admonition,{type:"info",children:(0,a.jsx)(t.p,{children:"GraphQL is not a database query language or a storage model. It contains graphs, nodes, and edges. The graph refers to graph structures specified in the schema. Within the graph, nodes represent objects and edges represent connections linking objects. GraphQL APIs traverses through the graph and returns application data based on the schema definitions, independent of how the data is stored."})}),"\n",(0,a.jsx)(t.h2,{id:"why-graphql",children:"Why GraphQL?"}),"\n",(0,a.jsx)(t.p,{children:"Hypi chose GraphQL because it includes both a query language and schema definition language (SDL). That is
1why our customers can precisely define the data, structure, and relationships they need."}),"\n",(0,a.jsx)(t.h3,{id:"ship-apps-faster-adopting-graphql-and-hypi",children:"Ship Apps faster adopting GraphQL and Hypi"}),"\n",(0,a.jsx)(t.p,{children:"Managing data for the modern applications can present many challenges. Developers are aggregating data from multiple sources that they need to merge into an app's UI. Furthermore, developers are deciding how to manage state on the client, simultaneously executing complex features such as caching and optimistic UI."}),"\n",(0,a.jsx)(t.p,{children:"Adopting Hypi in your organisation will ease these pain points considerably. Using GraphQL's declarative approach to data modelling and fetching will simplify data transformation and speed up your API and app development. Using the Hypi platform enables faster development cycles thanks to its ability to understand a GraphQL model's relationships. Hypi generates most (in some cases all) of the backend APIs instantly."}),"\n",(0,a.jsx)(t.h3,{id:"explore-your-api",children:"Explore your API"}),"\n",(0,a.jsx)(t.p,{children:"Hypi loves GraphQL's strongly typed query language because it enables developers to take advantage of incredible tooling for exploring App Instance APIs. Developers can query a Release schema for information about what queries and types it supports. Introspection is at your fingertips with automatic documentation, autocomplete, and more."})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},85162:(e,t,n)=>{n.d(t,{Z:()=>o});n(67294);var a=n(86010);const r={tabItem:"tabItem_Ymn6"};var s=n(85893);function o({children:e,hidden:t,className:n}){return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,n),hidden:t,children:e})}},74866:(e,t,n)=>{n.d(t,{Z:()=>j});var a=n(67294),r=n(86010),s=n(968),o=n(16550),i=n(20469),l=n(91980),u=n(67392),c=n(50012);function d(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return d(e).map((({props:{value:e,label:t,attributes:n,default:a}})=>({value:e,label:t,attributes:n,default:a})))}(n);return function(e){const t=(0,u.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function h({value:e,tabValues:t}){return t.some((t=>t.value===e))}function m({queryString:e=!1,groupId:t}){const n=(0,o.k6)(),r=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,l._X)(r),(0,a.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(n.location.search);t.set(r,e),n.replace({...n.location,search:t.toString()})}),[r,n])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=p(e),[o,l]=(0,a.useState)((()=>function({defaultValue:e,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!h({value:e,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const n=t.find((e=>e.default))??t[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:s}))),[u,d]=m({queryString:n,groupId:r}),[g,f]=function({groupId:e}){const t=function(e){return e?`docusaurus.tab.${e}`:null}(e),[n,r]=(0,c.Nk)(t);return[n,(0,a.useCallback)((e=>{t&&r.set(e)}),[t,r])]}({groupId:r}),b=(()=>{const e=u??g;return h({value:e,tabValues:s})?e:null})();(0,i.Z)((()=>{b&&l(b)}),[b]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,s]),tabValues:s}}var f=n(72389);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var y=n(85893);function v({className:e,block:t,selectedValue:n,selectValue:a,tabValues:o}){const i=[],{blockElementScrollPositionUntilNextRender:l}=(0,s.o5)(),u=e=>{const t=e.currentTarget,r=i.indexOf(t),s=o[r].value;s!==n&&(l(t),a(s))},c=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,y.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},e),children:o.map((({value:e,label:t,attributes:a})=>(0,y.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>i.push(e),onKeyDown:c,onClick:u,...a,className:(0,r.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":n===e}),children:t??e},e)))})}function w({lazy:e,children:t,selectedValue:n}
1){const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const e=r.find((e=>e.props.value===n));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,y.jsx)("div",{className:"margin-top--md",children:r.map(((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==n})))})}function x(e){const t=g(e);return(0,y.jsxs)("div",{className:(0,r.Z)("tabs-container",b.tabList),children:[(0,y.jsx)(v,{...e,...t}),(0,y.jsx)(w,{...e,...t})]})}function j(e){const t=(0,f.Z)();return(0,y.jsx)(x,{...e,children:d(e.children)},String(t))}},11151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>o});var a=n(67294);const r={},s=a.createContext(r);function o(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(s.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.