graphql icon indicating copy to clipboard operation
graphql copied to clipboard

Hot Module Reload not working with GraphQL/Apollo Server

Open phiggins opened this issue 2 years ago • 8 comments

Followup to:

  • https://github.com/nestjs/nest/issues/7840
  • https://github.com/apollographql/apollo-server/issues/5613

Current behavior

Following the NestJS Hot Reload guide does not work with Apollo. After making an update to a GraphQL resolver, the server builds again, and other non-GraphQL controllers/endpoints work, but for a variable time period (several seconds to several minutes) all GraphQL queries/mutations return the error:

Error: Cannot execute GraphQL operations after the server has stopped.
  at ApolloServer.<anonymous> (/Users/davidgolightly/dev/hotreload/.yarn/__virtual__/apollo-server-core-virtual-4a38e28045/0/cache/apollo-server-core-npm-2.25.2-17277a84d0-9470fd40eb.zip/node_modules/apollo-server-core/dist/ApolloServer.js:306:31)
  at Generator.next (<anonymous>)
  at /Users/davidgolightly/dev/hotreload/.yarn/__virtual__/apollo-server-core-virtual-4a38e28045/0/cache/apollo-server-core-npm-2.25.2-17277a84d0-9470fd40eb.zip/node_modules/apollo-server-core/dist/ApolloServer.js:8:71
  at new Promise (<anonymous>)
  at __awaiter (/Users/davidgolightly/dev/hotreload/.yarn/__virtual__/apollo-server-core-virtual-4a38e28045/0/cache/apollo-server-core-npm-2.25.2-17277a84d0-9470fd40eb.zip/node_modules/apollo-server-core/dist/ApolloServer.js:4:12)
  at ApolloServer.ensureStarted (/Users/davidgolightly/dev/hotreload/.yarn/__virtual__/apollo-server-core-virtual-4a38e28045/0/cache/apollo-server-core-npm-2.25.2-17277a84d0-9470fd40eb.zip/node_modules/apollo-server-core/dist/ApolloServer.js:283:16)
  at ApolloServer.<anonymous> (/Users/davidgolightly/dev/hotreload/.yarn/__virtual__/apollo-server-core-virtual-4a38e28045/0/cache/apollo-server-core-npm-2.25.2-17277a84d0-9470fd40eb.zip/node_modules/apollo-server-core/dist/ApolloServer.js:661:83)
  at Generator.next (<anonymous>)
  at /Users/davidgolightly/dev/hotreload/.yarn/__virtual__/apollo-server-core-virtual-4a38e28045/0/cache/apollo-server-core-npm-2.25.2-17277a84d0-9470fd40eb.zip/node_modules/apollo-server-core/dist/ApolloServer.js:8:71
  at new Promise (<anonymous>)

This appears to be thrown by Apollo Server when the server has stopped. My guess is that the internal Apollo Server has been stopped by the reload process, but is taking a long time to restart for some reason.

While the linked repro does reproduce the issue, it seems to fix itself after a relatively short period of time. Our (much larger) production Nest.js app takes much longer, on the order of 15-20 minutes.

Even catching this error in HMR mode and displaying something like "Apollo Server is restarting" would be helpful, but best of course would be fixing the responsiveness of the hot-reloaded Apollo Server.

Input Code

See minimal repro here: https://github.com/phiggins/hotreload-repro

Expected behavior

In order for HMR to be useful in dev mode, the time between start of rebuild to a usable server must be less than the time it would take to manually stop then restart the server.

Environment

Nest version: 8.0.6

 
For Tooling issues:
- Node version: v16.0.0  
- Platform:  Mac Catalina (10.15.7) 

Others:

apollo-server-express/apollo-server-core 2.25.2
npm 7.10.0
also repros on yarn berry v3.0.0

/cc @davidgoli

phiggins avatar Aug 18 '21 19:08 phiggins

Running into this same problem. I'll add that it seems like opening a new incognito tab for the playground fixes this problem for me, which is pretty odd.

isaacpz avatar Aug 21 '21 22:08 isaacpz

Issue at apollo-server: https://github.com/apollographql/apollo-server/issues/5613

Any news on this issue? It's a bit of a pain to work with graphql right now.

gterras avatar Mar 14 '22 01:03 gterras

@kamilmysliwiec both teams pointing to one another. However i can confirm that webpack hot module replacement works fine without nestjs. It would be super cool if you can take closer look to this because it is very annoying development when app is runing but graphql is not.

vytautas-pranskunas- avatar May 16 '22 18:05 vytautas-pranskunas-

We're evaluating a move to nestjs from plain node and I don't think we could move our team to this if we need to restart dev server between each change :( Anyone find a work around or are you just manually restarting the service between changes?

jedashford avatar Jan 24 '23 23:01 jedashford

We're evaluating a move to nestjs from plain node and I don't think we could move our team to this if we need to restart dev server between each change :( Anyone find a work around or are you just manually restarting the service between changes?

As far as I know this issue is fixed.

gterras avatar Jan 24 '23 23:01 gterras

I do see the original issue sometimes but not very frequent

kdawgwilk avatar Feb 01 '23 07:02 kdawgwilk

As per the documentation:

Note that webpack won't automatically copy your assets (e.g. graphql files) to the dist folder. Similarly, webpack is not compatible with glob static paths (e.g., the entities property in TypeOrmModule).

Is there some examples of getting hotreload to work with webpack and graphql?

simplenotezy avatar Apr 21 '23 01:04 simplenotezy