Shopify’s GraphQL API and How to Generate Schema Types for TypeScript/Swift/Flow/Scala with Apollo

So it was complete news to me when a friend of mine mentioned that Shopify had released a GraphQL API (in beta as of this article) for both the storefront and admin side to your store.

What great news! I’ve been using Apollo a lot lately and was eager to meet my Shopify clients’ needs for an easy to use CMS and my developer needs to use tech that I enjoy. Happy clients and happy developing, what can be better?

I wrote a little tutorial on using Apollo’s codegen to generate TypeScript interfaces for your schema generally, but for this article we will focus on Shopify. You can checkout Apollo’s codegen cli here and make types for swift, flow, and scala.

Else all you need to do is have Apollo in your project. Shopify has a cool little code example with React and Apollo if you want to download something and get running.

How?

So if you’re new to using Apollo codegen, this process happens in two steps:

1. Download the Shopify schema to a .json file
2. Generate types and interfaces for your app from that .json file

Step 1

First we need to hit our Shopify stores’ graphql endpoint to download our schema to a json file:

apollo schema:download types/download.json --endpoint=https://<your store>.myshopify.com/api/graphql --header="X-Shopify-Storefront-Access-Token: <your storefront access token>"

• I already have a ./types folder at the root level. You may need to add that folder or direction the output file to go where you please.
• You’ll need to add in your store in the endpoint.
• Lastly you’ll need your storefront access token.

Once that’s downloaded we can move to step 2!

Step 2

Next we need to generate our types and interfaces for the queries and mutations we use in our app.

apollo codegen:generate --queries=**/*.tsx  --schema=types/download.json --target=typescript

• I didn’t specify an output file so Apollo will just create a __generated__ folder with your interfaces in them ready for export wherever your queries are in your app.

__generated__/queries.tsx

Hopefully this worked out for you! You can now use the types and interfaces in your queries and mutations to enjoy all the intellisense and typed joys of TypeScript and VS Code.

Thanks for reading!