Trouble Understanding the new Customer API in a Headless Environment

Hydrogen and Storefront APIs
1

Hey Shopify Team and Community,

My name is Rylan, this is my first post on here. Glad there is a space for Shopify developers. :rocket:

I recently published an open-source project called Nitrogen a few months back, which is a Nuxt4 version of Shopify’s Hydrogen framework (Nuxt runs on Nitro, hence the name). You can check it out here! The feedback has been great (150+ stars already) and a lot of Vue/Nuxt developers are now using this to build out Shopify stores.

Currently I am using the Storefront API to handle accounts in a headless environment, which all works really well with no issues, but I would like to eventually upgrade to the Customer API for this. The main issue I am having is that I don’t really understand what needs to be placed in the API proxy headers…

For instance my current shopify.ts Storefront API proxy is super simple. I just pass in my .env options and its connected:

/**
 * Handles server requests to the Shopify GraphQL Storefront API.
 * @param event - The H3 event containing the request data
 * @returns The response from the Shopify API
 * @see https://shopify.dev/docs/api/storefront
 */
export default defineEventHandler(async (event) => {
  const { shopify: options } = useRuntimeConfig();
  const { query, variables } = await readBody(event);

  const endpoint = `${options.storefront}/api/${options.apiVersion}/graphql.json`;

  return await $fetch(endpoint, {
    method: 'POST',
    headers: {
      accept: 'application/json',
      'X-Shopify-Storefront-Access-Token': options.accessToken,
      'content-type': 'application/json'
    },
    body: JSON.stringify({ query, variables })
  });
});

But when it comes to the Customer API, I am not sure how I can create a similar proxy in such a straightforward way… I see the GraphQL example on the docs and also have a Client ID key after downloading the Headless app, but I’m just not sure where this goes in relation to the main POST request. As per the docs:

const response = await fetch(
'https://shopify.com/<shop-id>/account/customer/api/2025-01/graphql',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: {access_token},
    },
    body: JSON.stringify({
      operationName: 'SomeQuery',
      query: 'query { customer { emailAddress { emailAddress }}}',
      variables: {},
    }),
  },

Its all just pretty confusing to me, especially how to get a token (or maybe I don’t need this with the Client ID key? - I have no idea). Any guidance would be much appreciated here from the team or community:)

1 Like