Resource Fetching API

Use the standard web fetch() method to make authenticated calls to the Shopify GraphQL Admin API and to your app's backend.

Because your app runs in an iframe, it can't natively make these requests. When you make a call using fetch(), App Bridge intercepts the method and handles authentication automatically.

For requests to the Shopify GraphQL Admin API, use the shopify:admin/ URL scheme, and ensure that Direct API access is enabled for your app in its TOML configuration file.

For requests to your app's domain and subdomains, App Bridge automatically adds an OpenID Connect ID Token in the Authorization header, along with the shop's locale in Accept-Language.

You can disable interception of the fetch() method by using the disabledFeatures configuration option. For more information about general usage of fetch(), see the Fetch API documentation.

Anchor to Use casesUse cases

Authenticated requests: Send fetch requests to your app's backend that are automatically authenticated with an ID token.
API calls: Make authenticated calls to your app's API without manually managing authorization headers.
Subdomain support: Access resources on your application domain and subdomains with automatic authentication.
Direct API access: Use the global fetch function with built-in Shopify authentication for seamless data fetching.

Examples

js

const response = await fetch('/api/products');

const data = await response.json();

console.log(data);

Examples

Description
Make a fetch request to your app's backend. App Bridge automatically adds an authentication token and the shop's locale to the request headers.
js
```
const response = await fetch('/api/products');
const data = await response.json();
console.log(data);
```
Description
Send custom headers alongside App Bridge's automatic authentication. App Bridge automatically sets the `Authorization` and `Accept-Language` headers for requests to your app's domain, but you can add additional headers as needed.
js
```
fetch('/api/endpoint', {
  headers: {'accept-language': 'fr'},
});
```

Description

Query the Shopify GraphQLAdmin API directly from the browser using the `shopify:admin/` URL scheme. This requires Direct API access to be enabled in your app configuration. App Bridge routes these requests through the host frame, so they don't require a backend server.

js

const res = await fetch('shopify:admin/api/graphql.json', {
  method: 'POST',
  body: JSON.stringify({
    query: `
      query GetProduct($id: ID!) {
        product(id: $id) {
          title
        }
      }
    `,
    variables: {id: 'gid://shopify/Product/1234567890'},
  }),
});

const {data} = await res.json();
console.log(data);

Description

Pin your GraphQL Admin API requests to a specific API version instead of using the default. This is useful when you need to rely on behaviour from a particular API version.

js

const res = await fetch('shopify:admin/api/2025-04/graphql.json', {
  method: 'POST',
  body: JSON.stringify({
    query: `
      query GetProduct($id: ID!) {
        product(id: $id) {
          title
        }
      }
    `,
    variables: {id: 'gid://shopify/Product/1234567890'},
  }),
});

const {data} = await res.json();
console.log(data);

Was this page helpful?