Apollo-client-devtools: GraphiQL seem to disconnect on code changes

[raix]

I've setup the ApolloClient to use a client-side executor and schemas - no graphql server.

The graphiql ui picks this up nicely - but when I change the schema the app reloads modules and seems to disconnect the graphiql ui. So when running a query there will just be a spinner forever after code changes.

Workaround for now: Close and reopen devtools on code changes.

I saw the same symptom in @Urigo's angular/graphql presentation, where he had to close and reopen devtools - don't think it was a network issue.

[rrdelaney]

There seems to be problems with hot reloading and the devtools. Can you link to the codebase you're working on?

What types of components are you reloading? The entire app, or only smaller functional ones?

[raix]

I'll se if I can do a replication

[will-stone]

I'm finding this issue with a simple Create-React-App. Page refreshes on code change, Apollo dev tools remain on last state. To fix I have to close and reopen Chrome's dev tools.

[deftomat]

@will-stone Did you solve your issue? I'm experiencing exactly the same problem.

[will-stone]

@deftomat Sorry, I haven't done any Apollo since April, and don't have any personal projects on the go that uses it. I'll let you know if I ever come back to it.

[deftomat]

We found a rookie mistake in our codebase. Not sure how your codebases are looking but I want to share our solution.

We are using react-hot-loader in a project created by create-react-app (TypeScript version).

Our entry point looked like

import React from 'react';
import { render } from 'react-dom';
render(<App />, document.getElementById('root'));

Component App is exported as hot from App.tsx

export default hot(module)(App);

We constructed an Apollo Client in that component. That leads to re-creating the apollo client on each hot reload.

So, we decide to move a construction of a client to our entry point (outside of hot component).

Entry point now looks like:

import React from 'react';
import { render } from 'react-dom';

const apolloClient = ...

render(<App apolloClient={apolloClient} />, document.getElementById('root'));

This change fix a "loosing state" issue for us. As a side effect, devTools now works as expected, even between hot reloads.

[justinanastos]

Thank you everyone that's written in on this issue! I'm going to close this in favor of #108.