Meteor & Apollo -- How to disable GraphIQL?

1

I am trying to get started with the Meteor/Apollo example, but have hit a wall … it works great in a browser running on the same host, accessing http://localhost:3000/, but bombs when I try to access it from any other machine.

I get the error message :

App.js:18 Uncaught TypeError: refetch is not a function
    at onClick (http://192.168.122.186:3000/app/app.js?hash=7ac0321ca8b9e7bc8df82a72767cd2941d3486c4:90:22)
    at Object.ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:2897:16)
    at executeDispatch (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:2677:21)
    at Object.executeDispatchesInOrder (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:2700:5)
    at executeDispatchesAndRelease (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:2084:22)
    at executeDispatchesAndReleaseTopLevel (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:2095:10)
    at Array.forEach (native)
    at forEachAccumulated (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:3004:9)
    at Object.processEventQueue (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:2298:7)
    at runEventQueueInBatch (http://192.168.122.186:3000/packages/modules.js?hash=7a2cb85ea0bb33e2549d48d3a7d96351e05ea9ad:9300:18)
onClick @ App.js:18

React Tools in the browser accessing localhost:3000 shows me …

<ApolloProvider>
  <MeteorDataContainer>
    <Apollo(App) userId="">
      <App userId="", currentUser=null, refetch=bound ()>
        <div>...</div>
      </App>
    </Apollo(App)>
  </MeteorDataContainer>
</ApolloProvider>

… whereas a browser accessing the app with, for example, 192.168.122.186:3000 shows me :

<ApolloProvider>
  <MeteorDataContainer>
    <Apollo(App) userId="">
      <App userId="", hasErrors=true>
        <div>...</div>
      </App>
    </Apollo(App)>
  </MeteorDataContainer>
</ApolloProvider>

The hasErrors=true difference between the two seems to be due to this console error :

Navigated to http://192.168.122.186:3000/
modules.js?hash=7a2cb85…:22970 OPTIONS http://localhost:3000/graphql net::ERR_CONNECTION_REFUSED
HTTPFetchNetworkInterface.fetchFromRemoteEndpoint @ modules.js?hash=7a2cb85…:22970
(anonymous) @ modules.js?hash=7a2cb85…:22987
(anonymous) @ meteor.js?hash=e3f53db…:1105

Clearly, GraphIQL is not available on localhost:3000 on a client accessing 192.168.122.186:3000

So my question is – how to remove GraphIQL from my app, so that I can verify that it really is the error that makes refetch unavailable?

Other questions :

  • can I configure my Meteor app client-side to access GraphIQL at the address where the server-side is hosted?
  • can I configure React to not care about the error?
2

When using with Meteor, Apollo Graphql server will automatically be configured to serve from ROOT_URL=serverurl (or ROOT_URL=serverdomain)

To make it work for client accessing 192.168.122.186:3000 set ROOT_URL=192.168.122.186

3

@ric0 Please pardon my ill-mannered delay in confirming that your answer was correct.

Setting ROOT_URL ( nicely namespaced isn’t it? :worried: ) did solve the problem.

I still don’t know what happens with GraphIQL on a production server. Does it disable itself automatically? Is there access control for it?

4

Glad it worked.

Regarding your question AFAIK /graphql in production accept only POST requests, thus the interactive in-browser IDE will be gone.