Setup Shopify GraphQL Admin API Client in Hydrogen

While Shopify's

Or if you know the name of your store, interpolate and use this URL: and go from there.

Add the API client to our Hydrogen Application

First let’s install the for the using .

Then let's create or edit graphqlrc.ts () to include admin types:

import type {IGraphQLConfig} from 'graphql-config';

import {getSchema, preset} from '@shopify/hydrogen-codegen';





import {ApiType, shopifyApiTypes} from '@shopify/api-codegen-preset';





/**

* GraphQL Config

* @see https://the-guild.dev/graphql/config/docs/user/usage

* @type {IGraphQLConfig}

*/

export default {

 projects: {

   ...shopifyApiTypes({

     apiType: ApiType.Admin,

     apiVersion: '2024-10',

     documents: ['./app/graphql/admin/*.{js,ts,jsx,tsx}'],

     outputDir: './types',

   }),





   // putting this second as having it first causes

   // VS Code to use the wrong schema in app/graphql/admin





   storefront: {

     schema: getSchema('storefront'),

     documents: [

       './*.{ts,tsx,js,jsx}',

       './app/**/*.{ts,tsx,js,jsx}',

       '!./app/graphql/**/*.{ts,tsx,js,jsx}',

     ],

   },

 },

} as IGraphQLConfig;

Notice that we’ll have to isolate our Admin graphql in its own directory. i.e.,

export const GET_CUSTOMER = {...}

needs to live at /app/graphql/admin/customer.ts. This discrimination is important because some fields are shared. For example, “customer” exists in both but has different attributes/parameters. If the types are generated for the latter, you’ll be confused trying to work with GET_CUSTOMER as the Storefront API expects a customerAccessToken parameter while the Admin API expects an ID.

Ensure codegen is triggered in your scripts:

"scripts": {

  "build": "shopify hydrogen build --codegen",

  "dev": "shopify hydrogen dev --codegen --host",

}

After adding our GET_CUSTOMER export to customer.ts, let’s trigger the codegen (npm run dev). We should see a new file types/admin.generated.d.ts which will contain a number of ClientQuery type exports as well as the declared module @shopify/admin-api-client

Now try out the shopfiyAdminClient

export const loader = async ({request, context}: LoaderFunctionArgs) => {

 const id = 123;





 const {data} = await context.shopifyAdminClient.request(GET_CUSTOMER, {

   variables: {id: `gid://shopify/Customer/${id}`},

 });

If all is working according to plan, you should have VS Code's autocomplete showing customer

. We have an array of experts in Shopify Hydrogen.