1

I am building a Shopify app with React and Apollo, using apollo-link-state to manage a local data store.

Because of the way Shopify embedded apps are done, I end up updating the local data store from a modal, which is technically an iframe pointing to the same URL as my app.

My problem is that the main app doesn't realize that the local store has been updated (from the iframe), and components are thus not re-rendered.

Is there a way to manually force apollo-link-state to check if the data has changed?

Silvain
  • 399
  • 4
  • 20
  • 1
    Have you tried refetching the query as you would in a normal Graphql query ? `this.props.data.refetch()` – marcelotokarnia Jul 18 '18 at 17:39
  • Thanks for the pointer, that seemed like a very promising way! Unfortunately, `refetch` does not seem to be supported by `apollo-link-state`... When I call it, not only does it not re-render the component, but it seems to mess up quite a few things. For example, my modal stays open even when my main component's `state` key `modalIsOpen` on which its visibility is based is properly set to `false`... And my local store seems to revert to before I made changes in the modal... So even after a full page refresh, those changes are not visible. – Silvain Aug 01 '18 at 12:46
  • In the end, I was in touch with people at Shopify, and this is currently difficult, as one would need to manage the communication between `iframe`s using `postMessage` manually, probably along a React Portal [ https://reactjs.org/docs/portals.html ]. This should be baked-in future releases of Polaris though... For now, I'm just using a full-fledged page for the modal using react-router. – Silvain Aug 06 '18 at 13:13

0 Answers0