Resource Fetching

The `fetch` API allows you to send a fetch request that is authenticated with an [OpenID Connect ID Token](/docs/api/app-bridge-library/apis/id-token) from Shopify in the `Authorization` header. This is authenticated for your application domain and subdomains. See the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) documentation for more details. App Bridge injects automatic authorization into the global <code>fetch</code> function. While this is transparent and should not interfere with existing fetch code, this injection can be disabled using the [<code>disabledFeatures</code>](/docs/api/app-bridge-library/apis/config#setting-config-values-disabledfeatures) configuration option.

fetch

fetch('/api/endpoint');

Examples

Fetch with custom headers

fetch('/api/endpoint', {
  headers: {'accept-language': 'fr'},
});

Fetch with custom headers

fetch('/api/endpoint', {
  headers: {'accept-language': 'fr'},
});

Fetch directly from the Admin API using Direct API access

Fetch directly from the Admin API

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);

Fetch directly from the Admin API

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);