How to Access Shopify Data From Your App

Ardee Aram

GraphQL

This is part 3 of 3 of the 3 Technologies That You Need to Learn to Build Your Own Shopify App mini-series.

In this tutorial, we cover how to access Shopify data using GraphQL.

Our goal is to retrieve Shopify shop metadata, such as domain name, subscription plan, and timezone used using the Shop object.

Hello developers!

To make our Shopify app valuable to merchants, we need to retrieve and manipulate data from our Shopify store.

This will be the most exciting part for those into number crunching, data analysis, data aggregation, and cross-systems integration.

Available data for us includes Shopify products, orders, and customers, among other interesting data sets.

Shopify CLI provides a GraphQL layer that gives us easy access to Shopify’s data. This puts GraphQL as the our Technology #3 that you need to learn to build your own Shopify app. (As a refresher, here’s Technology #1 and Technology #2)

3.) GraphQL

According to graphql.org, GraphQL is both the “1.) query language for APIs and 2.) a runtime for fulfilling those queries with your existing data”.

It is then both the query language that we need to speak to get and change data, and at the same time it is also the technology stack that enables us to get data using the said query language.

What’s exciting is that Shopify CLI provides React Hooks (via Apollo React Client) that allows us to declare GraphQL queries from the React level. This makes app creation really fast and convenient (and I’d say more fun too!).

So, enough chitchat. How do we access Shopify data using GraphQL?

Objective

To reiterate, our objective is to retrieve Shopify shop metadata, such as domain name, subscription plan, and timezone used using the Shop object.

3.0) Ensure your Shopify app is running on your development environment

The instructions below will make more sense if you can run and play around with it. Thus, you need to ensure that you have a properly setup, authenticated, and running Shopify development app before proceeding.

If you need to quickly spin up a Shopify application, I suggest you download our tutorial on how to build your first Shopify app.

For convenience, a sample implementation can also be found here.

3.1) Build your GraphQL query inside your React application

First step is to create a string GraphQL query in your React codebase as seen on the above snippet. Don’t worry yet about the gql tagged template literal — we’ll get to that.

One thing that you’d notice is that GraphQL queries look like an “empty JSON shell” – only the keys are provided, without values. This is intended as the return value will be an object with that exact same “shape” (i.e., use the same keys that you provided), but with the requested values filled in.

To demonstrate, if we put the query result in data, the subscription plan name can be accessed via data.shop.plan.displayName. Once the lightbulb clicks, you’d be amazed how easy it is to query data.

Let’s now return to the reason we need the gql template literal tag. We need the gql tag to convert string into a syntax tree object for the GraphQL client.

For us humans, representing the query as GraphQL strings is very visual and convenient. In one glance, we can easily “get” the structure of the request and the expected query response. However, for the GraphQL client, strings are “are inconvenient to manipulate, if you are trying to do things like add extra fields, merge multiple queries together, or other interesting stuff”.

In short, just always use gql in your queries ;)

With that, our GraphQL query is ready to be used!

3.2) Create a function that will execute your query

Once we have our GraphQL query all prepped up, we need to create a function to signal execution of our query. Also, we need to store the resulting data, and other metadata such as errors and query status.

We can use Apollo Client’s useLazyQuery react hook to do this.

3.3) Invoke your function and capture results

Once we have the function and the data variables setup, the final thing we need to do is connect our function to an event that interests us. In our case, let’s use a Button click as a trigger to start the query.

We dump data that has been retrieved into a Polaris Data Table Component.

If done correctly, your data table should look something similar to this:

Shopify Data Table

On my next post, let’s discuss how to add, update, and delete using GraphQL.

Earn passive income by learning Shopify app development.

Subscribe to our mailing list and receive tutorials, code samples, and tips on Shopify app development.

As a BONUS, get "How to Build Your FIRST Shopify App in 20 minutes" handbook when you subscribe FOR FREE, as our gift.

Your information is 100% secure and will never be shared with anyone.