--- title: Resource Fetching API description: >- 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. api_name: app-home source_url: html: >- https://shopify.dev/docs/api/app-home/apis/authentication-and-data/resource-fetching-api md: >- https://shopify.dev/docs/api/app-home/apis/authentication-and-data/resource-fetching-api.md --- # Resource Fetching API Use the standard web `fetch()` method to make authenticated calls to the [Shopify GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest) 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](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration#admin) 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](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C) 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](https://shopify.dev/docs/api/app-home/apis/config#properties-propertydetail-disabledfeatures) configuration option. For more information about general usage of `fetch()`, see the [Fetch API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). ### Use 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 ### 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 ```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 ```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 ```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 ```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); ``` ***