Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Shopify App Bridge not working with React

charliehe
Shopify Partner
2 0 0

I am trying to use a React single-page application as the embedded UI for my Shopify app. I've followed the guides on https://shopify.dev/docs/apps/tools/cli to link my Shopify app and set direct API access to online in my shopify.app.toml file. I've also ensured that my app configuration has been deployed.

Unfortunately, when I deploy my React app to shopify.mydomain.com, the React app loads in the embedded UI on my test store, but I get the following errors in console in the embedded UI when trying to access the shopify global variable or try to fetch any Shopify API endpoint. 

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').
index-8r6ap7z6.js:41 

Fetch API cannot load shopify:admin/api/graphql.json. URL scheme "shopify" is not supported.
j_ @ index-8r6ap7z6.js:41
(anonymous) @ index-8r6ap7z6.js:49
(anonymous) @ index-8r6ap7z6.js:49
va @ index-8r6ap7z6.js:40
rn @ index-8r6ap7z6.js:40
Vf @ index-8r6ap7z6.js:40
gr @ index-8r6ap7z6.js:38
kh @ index-8r6ap7z6.js:40
hr @ index-8r6ap7z6.js:40
T0 @ index-8r6ap7z6.js:40
T @ index-8r6ap7z6.js:25
N @ index-8r6ap7z6.js:25
index-8r6ap7z6.js:49 

TypeError: Failed to fetch
    at j_ (index-8r6ap7z6.js:41:133624)
    at index-8r6ap7z6.js:49:205
    at index-8r6ap7z6.js:49:226
    at va (index-8r6ap7z6.js:40:24263)
    at rn (index-8r6ap7z6.js:40:42287)
    at Vf (index-8r6ap7z6.js:40:36553)
    at gr (index-8r6ap7z6.js:38:3274)
    at kh (index-8r6ap7z6.js:40:41193)
    at hr (index-8r6ap7z6.js:40:40191)
    at T0 (index-8r6ap7z6.js:40:35664)
index-8r6ap7z6.js:49 

null

 

Here's my React component:

import { useEffect } from "react";

import { Loading, Provider } from "@shopify/app-bridge-react";
import { AppProvider, Card } from "@shopify/polaris";

const config = {
  apiKey: "c795d90d920207874dcf902bdfc422d3",
  host: new URLSearchParams(location.search).get("host") as string,
  forceRedirect: true,
};

const getDomain = async () => {
  try {
    const response = await fetch("shopify:admin/api/graphql.json", {
      method: "POST",
      body: JSON.stringify({
        query: `
        query {
          shop {
            domains {
              host
            }
          }
        }
      `,
      }),
    });

    const {
      shop: { domains },
    }: {
      shop: { domains: { host: string }[] };
    } = await response.json();

    return domains.find(({ host }) => !host.includes(".myshopify.com"));
  } catch (error) {
    console.log(error);

    return null;
  }
};

export default function App() {
  useEffect(() => {
    const initialize = async () => {
      console.log(shopify);
      const domain = await getDomain();
      console.log(domain);
    };

    initialize();
  });

  return (
    <AppProvider i18n={[]}>
      <Provider config={config}>
        <Loading />
        <Card />
      </Provider>
    </AppProvider>
  );
}


I've followed these guides and I cannot for the life of me find any more documentation...

Am I doing something wrong?

 

Replies 6 (6)

Liam
Shopify Staff
2669 288 730

Hi Charliehe,

 

This does seem like an unusual error - I've connected with the App Bridge team on this and will report back asap.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Liam
Shopify Staff
2669 288 730

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Fabien_Sebban
Shopify Partner
37 0 6

Hi @Liam 

This app example is a React-embedded app. This means he already loaded the npm package @shopify/app-bridge-react. The app-bridge.js shouldn't be included in the @shopify/app-bridge-react npm package?

Thanks

 

Fabien_Sebban
Shopify Partner
37 0 6

The alert caution message in the app bridge documentation made me think there was probably something wrong with the way I installed the app bridge library in my code. 

Capture d’écran 2024-02-14 à 18.14.32.png

Then, I added the script and meta tags:
<meta name="shopify-api-key" content="SHOPIFY_API_KEY" />
 
But the error persists. Does it mean I have to uninstall the shopify app-bridge npm packages?
 
But I still have the error message "Fetch API cannot load shopify:admin/api/graphql.json. URL scheme "shopify" is not supported."
 
 
pklitscher
Shopify Partner
10 0 21

Hey @Liam 

I am experiencing the same. Currently migrating to the latest app bridge and cannot get authenticated fetch to work. 

I have added the shopify-api-key and script to the head of my index.html

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

I can confirm that the global shopify object is available and I can launch the new modal using the ui-modal modal element 

 

However, I am getting the same "Fetch API cannot load shopify:admin/api/graphql.json. URL scheme "shopify" is not supported." error and fetch requests to my own endpoints are not being sent with the authorization headers as described here https://shopify.dev/docs/api/app-bridge-library/reference/resource-fetching

Stephen2020
Shopify Partner
16 1 5

Same problem here:

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

 

In the documentation at https://shopify.dev/docs/apps/tools/cli/configuration it is suggested to add a section [access.admin] to shopify.app.toml and that the property "embedded_app_direct_api_access" must be set to true:

 

Stephen2020_0-1708536055052.png

 

But that only gives an error when starting "npm run dev":

 

Stephen2020_1-1708536181559.png