<\/p>\n
1. What is GraphQL?<\/strong><\/h4>\nAccording to Graph website, www.graphql.org, ‘GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data’<\/em>. Let’s break this down! Let’s take REST API for example. If you want some data, you make a HTTP request to some endpoint, say, http:\/\/myserver\/orders, these are the steps:<\/p>\n\n- send the api request to the endpoint<\/li>\n
- the endpoint executes a function that connect to the database and fetches the data<\/li>\n
- the data is sent back to you as a json response<\/li>\n<\/ul>\n
For example, the below figure shows the response from a Shopify orders API.<\/p>\n![\"Problem](\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/02\/Screenshot-2021-02-12-at-16.05.28-1024x538.png\")
<\/a>Problem of overfetching with REST APIs<\/figcaption><\/figure>\n <\/p>\n
Do yo know that what is returned is just\u00a0 a single order data! This is the problem of overfetching<\/em> with REST APIs. You see that mode of the information returned are not needed. GraphQL solves this problem by allowing you to fetch only the\u00a0 data you need, nothing more, nothing less.<\/p>\nWe also have the problem of underfetching<\/em>. In this case, REST API response returns field including id field. These id fields relates to other entities. For instance, productId may be returned where you actually need the description and price. GraphQL also solves this problem of underfetching<\/em>.<\/p>\n <\/p>\n
4. How GraphQL Works<\/strong><\/h4>\nAs mentioned previously, GraphQL is a query language and runtime. So the queries has to be defined first. Then the runtime has to be setup on a server. Normally, you will find some library or service to achieve this. Here are the steps of getting data from GraphQL<\/p>\n
\n- send a query to the GraphQL service<\/li>\n
- the service validates and executes the query<\/li>\n
- the query is executed and the data is fetched<\/li>\n
- the result is sent back to the client as a linked list(or graph)<\/li>\n<\/ul>\n
Let me now show you an equivalent of the GraphQL equivalent of the orders API which returns only the data we need.<\/p>\n
Query<\/p>\n
query{\r\n orders(first:<\/span>1<\/span>){\r\n edges{\r\n node{\r\n id\r\n name\r\n }\r\n }\r\n }\r\n}\r\n<\/pre>\n <\/p>\n
Response<\/p>\n
{\r\n \"data\"<\/span>:<\/span> {\r\n \"orders\"<\/span>:<\/span> {\r\n \"edges\"<\/span>:<\/span> [\r\n {\r\n \"node\"<\/span>:<\/span> {\r\n \"id\"<\/span>:<\/span> \"gid:\/\/shopify\/Order\/3217147494577\"<\/span>,\r\n \"name\"<\/span>:<\/span> \"#1001\"<\/span>\r\n }\r\n }\r\n ]\r\n }\r\n }\r\n<\/pre>\n <\/p>\n
3. GraphQL Demo<\/strong><\/h4>\nLet’s now take an example of working with GraphQL. At this point, I would recommend you also watch the video the see how it works. This demo would be based on a Shopify app that return a list of products and displays them on the console. The products would be displayed with the click of a button.<\/p>\n
Prerequisite<\/strong>: You need to have a basic Shopify App. I’ll update the step by step on this.<\/p>\nFollow the steps below:<\/p>\n
Step 1<\/strong> – Create functional component. I call it GetProducts.js<\/em><\/p>\nStep 2<\/strong> – Import the ggl<\/em> library as well as the usQuery library like so:
\n<\/p>\nimport<\/span> gql from 'graphql-tag'<\/span>;\r\n\r\nimport<\/span> {useQuery } from 'react-apollo'<\/span>;\r\n<\/pre>\n <\/p>\n
Step 3<\/strong> – Add a button to the component and a clickHandler. This function is shown below:<\/p>\nfunction<\/span> GetProducts() {\r\n return<\/span> (\r\n <<\/span>div><\/span>\r\n <<\/span>button onClick=<\/span>{showProduts}><\/span>Show Products<<\/span>\/button>\r\n <<\/span>\/div>\r\n )\r\n}\r\n<\/pre>\n <\/p>\n
Step 4<\/strong> – Define the following variables in the component<\/p>\nconst<\/span> GET_PRODUCTS =<\/span> gql`\r\n{\r\nproducts(first:<\/span> 3<\/span>) {\r\n edges{\r\n node{\r\n id\r\n title\r\n }\r\n }\r\n}\r\n}\r\n`;\r\n\r\nlet<\/span> data =<\/span> useQuery(GET_PRODUCTS)\r\n<\/pre>\nThe first variable GET_PRODUCTS is the GraphQL query while the second variable data would hold the response data returned.<\/p>\n
<\/p>\n
Step 5<\/strong> – Now write the function to simply log the data to the console like so:
\n<\/p>\nfunction<\/span> showProducts(){\r\n console.log(data)\r\n}\r\n<\/pre>\n <\/p>\n
Step 6<\/strong> – Finally, include the GetProducts component in the index.js component. Then run shopify server. Go to the App page and click on the button. Open the console and see that a list of products is returned. This is shown below:<\/p>\n![\"Response](\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/02\/Screenshot-2021-02-12-at-18.10.51.png\")
<\/a>Response from GraphQL Query<\/figcaption><\/figure>\nI recommend you watch the video as it makes it very clear.<\/p>\n
I would be making a more comprehensive beginner tutorial on GraphQL in the coming days.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn about GraphQL and how to use it. This would be useful to you if you have a basic knowledge … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1970","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1970"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1970\/revisions"}],"predecessor-version":[{"id":2138,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1970\/revisions\/2138"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- send the api request to the endpoint<\/li>\n
- the endpoint executes a function that connect to the database and fetches the data<\/li>\n
- the data is sent back to you as a json response<\/li>\n<\/ul>\n
For example, the below figure shows the response from a Shopify orders API.<\/p>\n
<\/a>Problem of overfetching with REST APIs<\/figcaption><\/figure>\n <\/p>\n
Do yo know that what is returned is just\u00a0 a single order data! This is the problem of overfetching<\/em> with REST APIs. You see that mode of the information returned are not needed. GraphQL solves this problem by allowing you to fetch only the\u00a0 data you need, nothing more, nothing less.<\/p>\n
We also have the problem of underfetching<\/em>. In this case, REST API response returns field including id field. These id fields relates to other entities. For instance, productId may be returned where you actually need the description and price. GraphQL also solves this problem of underfetching<\/em>.<\/p>\n
<\/p>\n
4. How GraphQL Works<\/strong><\/h4>\n
As mentioned previously, GraphQL is a query language and runtime. So the queries has to be defined first. Then the runtime has to be setup on a server. Normally, you will find some library or service to achieve this. Here are the steps of getting data from GraphQL<\/p>\n
- \n
- send a query to the GraphQL service<\/li>\n
- the service validates and executes the query<\/li>\n
- the query is executed and the data is fetched<\/li>\n
- the result is sent back to the client as a linked list(or graph)<\/li>\n<\/ul>\n
Let me now show you an equivalent of the GraphQL equivalent of the orders API which returns only the data we need.<\/p>\n
Query<\/p>\n
query{\r\n orders(first:<\/span>1<\/span>){\r\n edges{\r\n node{\r\n id\r\n name\r\n }\r\n }\r\n }\r\n}\r\n<\/pre>\n<\/p>\n
Response<\/p>\n
{\r\n \"data\"<\/span>:<\/span> {\r\n \"orders\"<\/span>:<\/span> {\r\n \"edges\"<\/span>:<\/span> [\r\n {\r\n \"node\"<\/span>:<\/span> {\r\n \"id\"<\/span>:<\/span> \"gid:\/\/shopify\/Order\/3217147494577\"<\/span>,\r\n \"name\"<\/span>:<\/span> \"#1001\"<\/span>\r\n }\r\n }\r\n ]\r\n }\r\n }\r\n<\/pre>\n<\/p>\n
3. GraphQL Demo<\/strong><\/h4>\n
Let’s now take an example of working with GraphQL. At this point, I would recommend you also watch the video the see how it works. This demo would be based on a Shopify app that return a list of products and displays them on the console. The products would be displayed with the click of a button.<\/p>\n
Prerequisite<\/strong>: You need to have a basic Shopify App. I’ll update the step by step on this.<\/p>\n
Follow the steps below:<\/p>\n
Step 1<\/strong> – Create functional component. I call it GetProducts.js<\/em><\/p>\n
Step 2<\/strong> – Import the ggl<\/em> library as well as the usQuery library like so:
\n<\/p>\nimport<\/span> gql from 'graphql-tag'<\/span>;\r\n\r\nimport<\/span> {useQuery } from 'react-apollo'<\/span>;\r\n<\/pre>\n<\/p>\n
Step 3<\/strong> – Add a button to the component and a clickHandler. This function is shown below:<\/p>\n
function<\/span> GetProducts() {\r\n return<\/span> (\r\n <<\/span>div><\/span>\r\n <<\/span>button onClick=<\/span>{showProduts}><\/span>Show Products<<\/span>\/button>\r\n <<\/span>\/div>\r\n )\r\n}\r\n<\/pre>\n<\/p>\n
Step 4<\/strong> – Define the following variables in the component<\/p>\n
const<\/span> GET_PRODUCTS =<\/span> gql`\r\n{\r\nproducts(first:<\/span> 3<\/span>) {\r\n edges{\r\n node{\r\n id\r\n title\r\n }\r\n }\r\n}\r\n}\r\n`;\r\n\r\nlet<\/span> data =<\/span> useQuery(GET_PRODUCTS)\r\n<\/pre>\nThe first variable GET_PRODUCTS is the GraphQL query while the second variable data would hold the response data returned.<\/p>\n
<\/p>\n
Step 5<\/strong> – Now write the function to simply log the data to the console like so:
\n<\/p>\nfunction<\/span> showProducts(){\r\n console.log(data)\r\n}\r\n<\/pre>\n<\/p>\n
Step 6<\/strong> – Finally, include the GetProducts component in the index.js component. Then run shopify server. Go to the App page and click on the button. Open the console and see that a list of products is returned. This is shown below:<\/p>\n
<\/a>Response from GraphQL Query<\/figcaption><\/figure>\n I recommend you watch the video as it makes it very clear.<\/p>\n
I would be making a more comprehensive beginner tutorial on GraphQL in the coming days.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn about GraphQL and how to use it. This would be useful to you if you have a basic knowledge … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1970","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1970"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1970\/revisions"}],"predecessor-version":[{"id":2138,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1970\/revisions\/2138"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}