Unable to Fetch with Direct API Access – “shopify:” URL Scheme Not Supported

App Bridge
1

I am attempting to use Direct API Access following the instructions outlined here. However, as soon as I make a fetch request, I encounter the following error:

Fetch API cannot load shopify:admin/api/graphql.json. URL scheme "shopify" is not supported.

I have enabled direct access in my shopify.app.toml configuration:

[access.admin]
direct_api_mode = "offline"
embedded_app_direct_api_access = true

and my app loads Shopify App Bridge with the API key:

<meta name="shopify-api-key" content="API_KEY_HERE" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

I’m stuck on why this error for hours. Any suggestions or ideas on how to fix it would be super helpful!

1 Like
3

Hi @justsanjit

In the logic of interacting with Shopify, the word ‘Shopify’ is not allowed.
Can more information be shared for problem analysis

4

Hey @justsanjit

Couple of things to check here:

  1. Do you have a content security policy or anything locking down your app?
  2. What framework are you using and is it injecting any scripts before your app bridge one?
  3. Are you also adding a query for example
const res = await fetch('shopify:admin/api/graphql.json', {
      method: 'POST',
      body: JSON.stringify({
        query: `mutation CreateDiscount($automaticAppDiscount: DiscountAutomaticAppInput!) {
  discountAutomaticAppCreate(automaticAppDiscount: $automaticAppDiscount) {
    automaticAppDiscount {
      discountId
    }
    userErrors {
      field
      message
    }
  }
}`,
        variables: { automaticAppDiscount: input },
      }),
    });
5

I’m seeing this same issue @justsanjit using AppBridge v4 installed over the CDN.

I ended up making a simple graphql proxy route that auth’s with the session token in order to make these requests.

Maybe it’s a new TOML configuration we have to enable, but I’m seeing the same problem.

6

I created a brand new app in the Partners Dashboard using cli’s app config link, which prompted me to choose a TOML file name. I selected a new TOML file name and updated the newly created TOML file to match the one I had previously, except for the client_id, name, and handle values.

In my app, I also updated the key and secret for backend accordingly.

When I deployed the exact same code to this new app, the error URL scheme “shopify” is not supported. not appeared in console. Direct API access seems to be working in new app.

I’m not entirely sure why the same code didn’t work with my existing old app but worked fine with the newly created one.

7

I eventually got this working, I had to use online access mode in my toml file:

[access.admin]
direct_api_mode = "online"
embedded_app_direct_api_access = true

Then I had to re-deploy and the URLs for these requests are automatically updated to https://admin.shopify.com/api/app_proxy/{shopDomain}

I didn’t need to start from scratch, and not sure if offline mode is broken.

But I also made sure to remove any Content-Type headers in the fetch request as well.