Ok guys im banging my head against the wall on this. I just cant figure out why my app fails outside an iframe (forceRedirect = false) but works fine inside the shopify iframe. I want to be able to work without the iframe for testing.
I’m using rails, react, apollo. I used a bunch of examples but clearly I dont understand what’s happening where.
I start at the installation page, where you can enter the shop url. I hit install and go to https://<dev_url>?shop=<shop_url> The page loads, packs are loaded, and then it tries to do a Graphql query to my shopify app and it shows the following error:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('
And a screenshot, you can see the navigation already rendered and now tries to get data to show (which fails):
When I'm opening the samen page within the iframe there are no errors. All good.
I'll just share some code which I think is relevant.
embedded_app.html.erb:
```markup
<% application_name = ShopifyApp.configuration.application_name %>
<% if ShopifyApp.use_webpacker? %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<% else %>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
<% end %>
<%= csrf_meta_tags %>
<%= render 'layouts/flash_messages' %>
<%= content_tag(:div, nil, id: 'shopify-app-init', data: {
api_key: ShopifyApp.configuration.api_key,
shop_origin: _origin || (@current_shopify_session.domain if @current_shopify_session),
debug: Rails.env.development?,
forceRedirect: !(Rails.env.development? || Rails.env.test?)
} ) %>
<% if content_for?(:javascript) %>
<%= yield :javascript %>
<% end %>
So here forceRedirect is really false. I’ve checked it a dozen of times.
Then I have app/javascript/shopify_app file:
document.addEventListener('DOMContentLoaded', () => {
var data = document.getElementById('shopify-app-init').dataset;
var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
window.app = createApp({
apiKey : data.apiKey,
shopOrigin : data.shopOrigin,
forceRedirect: data.forceRedirect == 'true',
});
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;
TitleBar.create(app, {
title: data.page,
});
});
And of course, my App.js:
import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
import { AppProvider } from '@shopify/polaris';
import { createApp } from '@shopify/app-bridge';
import { authenticatedFetch } from '@shopify/app-bridge-utils';
import { getSessionToken } from '@shopify/app-bridge-utils';
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';
import enTranslations from '@shopify/polaris/locales/en.json';
import '@shopify/polaris/dist/styles.css';
import React from 'react';
import { BrowserRouter, Link } from 'react-router-dom';
import Routes from './Routes';
import AppRouter from './AppRouter';
import AppTabs from './elements/AppTabs';
export const ConditionContext = React.createContext();
export default function App({ shopOrigin, apiKey, conditions, forceRedirect }) {
console.log('shopOrigin', shopOrigin);
console.log('window.location.host', window.location.host);
console.log('window.location', window.location);
const client = new ApolloClient({
link: new createHttpLink({
credentials: 'same-origin',
fetch : authenticatedFetch(window.app),
uri : '/graphql',
}),
cache: new InMemoryCache(),
});
const CustomLinkComponent = ({ children, url, ...rest }) => {
return (
{children}
);
};
return (
);
}
This is my assumption: but for some reason the authenticatedFetch thinks it has a different url than it should. Which works fine from inside an iframe but not if it is rendered outside of it.
Hope you guys can help me out!