I need help setting up a GraphQL client for my Shopify store theme using plain JavaScript. Most tutorials I found rely on package managers like npm to install the required libraries, but Shopify themes work differently. We have to use CDN links or upload files directly to the assets folder.
Is there a way to make this work in a Shopify environment? I’m also open to alternative solutions for data caching if you have suggestions.
I’ve attempted a couple of approaches but haven’t had success yet:
console.log("loading graphql client");
// Method 1: accessing from window object (commented out)
// const { GraphQLClient, CacheManager, query, NetworkLink } = window['@apollo/client/core'];
// Method 2: ES6 import from CDN
import { GraphQLClient, CacheManager, query, NetworkLink } from "https://unpkg.com/@apollo/[email protected]/core/core.cjs.js"
const graphqlClient = new GraphQLClient({
link: new NetworkLink({
uri: 'https://example-store.myshopify.com/api/2023-07/graphql.json',
headers: {
'X-Shopify-Storefront-Access-Token': 'your-token-here'
}
}),
cache: new CacheManager()
});
console.log("Client instance created: ", graphqlClient);
// Making it available globally
window.shopifyGraphQL = graphqlClient;
Any guidance would be appreciated!
Skip Apollo and use axios through CDN instead - way more reliable in Shopify. Just drop the CDN script in your theme.liquid header and build your own GraphQL wrapper. I’ve run this setup for over a year with zero problems. For caching, use localStorage with timestamp checks - beats any third-party cache manager in liquid templates. Keep your GraphQL simple and let Shopify’s existing APIs do the heavy work. You get GraphQL benefits without the headache of bloated client libraries that don’t play nice with Shopify’s quirks.
Your Apollo import is mixing up the package structure. Apollo Client’s core module doesn’t export those classes the way you’re accessing them. Try graphql-request instead - it’s simpler and has better CDN support. Just add <script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script> to your theme.liquid and access it through window.GraphQLClient. This worked for me with similar constraints. You could also download the minified bundle directly, upload it to your assets folder, and include it as a regular script tag. Just avoid ES6 imports in Shopify’s liquid environment - module support is inconsistent across browsers your customers use.
Download the GraphQL client library file and upload it to your theme’s assets folder. I used graphql-js from the official GraphQL repo on GitHub - just grab the browser bundle from their releases and upload it as graphql.min.js to your assets. Then add it to theme.liquid with {{ 'graphql.min.js' | asset_url | script_tag }}. But honestly? Skip the external GraphQL clients for Shopify. Use their built-in Storefront API functions instead. Native fetch gives you way more control and you won’t deal with dependency headaches. Just create a simple wrapper function for auth headers and query formatting - no extra library bloat slowing down your theme.
drop the es6 imports - shopify themes don’t support modules. use apollo’s umd build with a regular script tag instead. fixed the same issue for me last month.
Manual library management in Shopify themes is a nightmare. You’re fighting the platform instead of using it right.
I’ve hit this wall countless times. The real problem isn’t GraphQL itself - it’s keeping everything working as your store scales. You’ll drown in CDN links, version mismatches, and broken dependencies.
Skip the theme mess entirely. Build automation outside it instead. Set up workflows that handle GraphQL queries, process data, and push clean results straight through Shopify’s APIs. No more import statement headaches or browser compatibility hell.
Trigger these workflows when inventory shifts, customer data changes, or any store event fires. Data flows clean without junking up your theme with heavy client libraries.
I’ve watched stores completely flip their performance this way. Instead of cramming JavaScript libraries into every page load, data processing runs behind the scenes while your theme just shows results.
Latenode makes this dead simple to build and maintain. Check it out: https://latenode.com
skip apollo and just use fetch with shopify’s storefront api. post your graphql query directly to the endpoint - no external libraries needed. you can handle caching yourself if you want it.
Don’t load GraphQL clients directly in themes - it’s a maintenance nightmare. Every library update breaks something and debugging becomes hell when dependencies conflict.
I’ve watched this kill store performance. You’re forcing heavy JavaScript libraries on every page just for data fetching. Customers get stuck with slower load times.
Better approach: handle GraphQL server-side with automated workflows. Run your queries against Shopify’s APIs in the background, then push processed data to your theme via webhooks or API calls.
Keeps your theme lightweight with zero dependencies. No CDN issues, no browser compatibility headaches. Data processing happens behind the scenes while your frontend just shows clean results.
Inventory updates or customer changes? Workflows trigger automatically to refresh your GraphQL data. Everything syncs without stuffing client libraries into liquid templates.
This scales much better than cramming JavaScript into theme files. Store runs faster, maintenance stays simple.
Latenode handles the workflow automation and API connections: https://latenode.com