Introduction to GraphQL & BigCommerce

Do you know about GraphQL?

Perhaps some people will say “YES,” but the majority will have the NO answer. Regarded as an alternative to REST API, GraphQL possesses plenty of features to help developers make it easier to manage and develop their eCommerce store. This is also the reason why BigCommerce, one of the most popular platforms for online stores, develops and introduces this feature to their merchants.

So, what exactly is GraphQL? What can it bring to users? How is GraphQL used in BigCommerce? All will be answered in this post! Also, you will see an example of GraphQL on this platform.

About GraphQL

GraphQL is a type of programming language which is known as an open-source data queries and manipulation language for APIs. Initially developed by Facebook in 2012, GraphQL’s owner then was changed to Lux Foundation in 2018. After nearly 10 years of development, this programming language has become a strong competitor of REST and other web service architectures.

With GraphQL, clients will be able to request exactly what they need via HTTP protocol. IT enables users to set a certain structure of data needed, and then the system will return the data with the same structure as had been set. This helps clients avoid the case of too much data returned and work with the data more efficiently.

More than that, GraphQL can be used in plenty of languages, such as JavaScript, Haskell, Perl, Python Development Company, Java, C++, and more.

Benefits of GraphQL

Easy to expand query

In GraphQL, it is pretty simple to create a request. For example, you can make a request to retrieve a heroine like this:

{

heroine {

name

}

}

But, what can you do if your boss then requires her family members? Create one more call to the endpoint of her family members like heroines/family as in RESTful API?

Actually, the key for it is much simpler, GraphQL empowers users to add more data required in their query. Hence, instead of getting another all, the query can be lengthened like:

{

heroine {

name

family members {

name

}

}

}

Strict in values

In fact, GraphQL is considered a strongly-typed language which means it will be harder for the data to be accepted. In addition, its explanation about the error is also understandable so that users can quickly find out the errors and fix them.

Access data in only one endpoint

There is only one endpoint for all requests in GraphQL. When you make changes to your front end, the back end will no longer need to be re-architectured every time, which helps users provide their customers the latest news in a rapid manner. It allows them to update the market trends and satisfy customer feedback without wrangling and tweaking the models and controllers.

About BigCommerce GraphQL

GraphQL in BigCommerce enables users to request storefront data from the Stencil theme or remote sites. Thus, you now can access data (that are unavailable via the Stencil objects) from the frontend Javascript instead of opening the backend from the template logic as before. As a result, you can implement multiple tasks, such as accessing product options, querying product images, getting customers’ information, seeking brands, constructing front-end apps, etc.

More than that, GraphQL can streamline the workflows and improve store’s performance by exploiting data from an API call. Users will be provided with all the benefits from the BigCommerce backend without compromising on the technology that can be used on the frontend. Thus, they will have more time and money to enhance the customer experience in their store.

Besides, you should keep in mind that BigCommerce GraphQL storefront API is still being developed so that only when reaching the necessary features to offer a full shopping experience do we remove its’ early access status. Also, you can see all the new functionalities in the Developer Changelog. Additionally, the GraphQl API is recently not supported in Blueprint themes.

BigCommerce GraphQL samples

To get the first three levels of category tree, users can use this:

query CategoryTree3LevelsDeep {

` site {`

` categoryTree {`

` …CategoryFields`

` children {`

` …CategoryFields`

` children {`

` …CategoryFields`

` }`

` }`

` }`

` }`

}

` `

fragment CategoryFields on CategoryTreeItem {

` name`

` path`

` entityId`

}

The response will be:

{

` “data”: {`

` “site”: {`

` “categoryTree”: [`

` {`

` “name”: “Kitchen”,`

` “path”: “/kitchen/”,`

` “entityId”: 27,`

` “children”: []`

` },`

` {`

` “name”: “Publications”,`

` “path”: “/publications/”,`

` “entityId”: 26,`

` “children”: []`

` },`

` {`

` “name”: “Shop All”,`

` “path”: “/shop-all/”,`

` “entityId”: 23,`

` “children”: []`

` },`

` {`

` “name”: “Utility”,`

` “path”: “/utility/”,`

` “entityId”: 25,`

` “children”: []`

` },`

` {`

` “name”: “Garden”,`

` “path”: “/garden/”,`

` “entityId”: 19,`

` “children”: [`

` {`

` “name”: “Bath”,`

` “path”: “/garden/bath/”,`

` “entityId”: 24,`

` “children”: []`

` }`

` ]`

` }`

` ]`

` }`

` }`

}

Final thoughts

In conclusion, it can’t be denied that GraphQL is a useful way to help people get the necessary data in a short time. In fact, GraphQL is still a feature-incomplete in BigCommerce, but it can help you a lot to develop your business. BigCommerce users will save lots of time for accessing information and use this amount of time for other essential things.