Reload Browser on route which is using GraphQL creates an exception on the server

[JuergenWerle]

Hi, nice work, greetings from SYZYGY :) I have just evaluated the edge platform for a project. I have added a route which is using GraphQL in the view. When reloading the browser with this route the server throws an exception. I have found out that the deepFetch.js in the edge-core has the problem:

... if (instance && typeof instance.fetchData === "function") { return instance.fetchData() } ...

This assumes the instance to return a promise but graphql-wrapper has also function named fetchData which is not returning a promise.

[swernerx]

Hi Jürgen, thanks for getting in contact. :)

It would be helpful to have a small app project which demonstrate this issue. It's a little inconvenient to change code without seeing such an issue.

[JuergenWerle]

Hi Sebastian,

here it is https://github.com/JuergenWerle/egde-test-graphql

I have added a view GraphQL where the component is wrapped with graphql HOC. Though there is no actual GraphQL server and it of course creates exceptions in the browser, the error message you should see in the terminal output is: ... [EDGE] Fetching data... Error occurred in Promise based visitor result provided to react-tree-walker. { Error: Network error: realFetch.call is not a function ...

Steps to reproduce:

1. Navigate to "http://localhost:1339/graphql"
2. Reload the browser.

Hope this helps, have a nice day!

[swernerx]

Sorry I am a bit late on checking your demo. What I see probably differs a little from your report.

Using locale: de-DE via accept-language
[EDGE] Fetching data...
Error occurred in Promise based visitor result provided to react-tree-walker.
{ Error: Network error: request to http://localhost:8339 failed, reason: connect ECONNREFUSED 127.0.0.1:8339
    at new ApolloError (/Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:3113:28)
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2160:41
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2541:17
    at Array.forEach (<anonymous>)
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2540:18
    at Map.forEach (<anonymous>)
    at QueryManager.module.exports../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (/Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2535:22)
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2109:31
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)
  graphQLErrors: [],
  networkError: 
   { FetchError: request to http://localhost:8339 failed, reason: connect ECONNREFUSED 127.0.0.1:8339
    at ClientRequest.<anonymous> (/Users/swerner/Workspace/temp/egde-test-graphql/node_modules/node-fetch/index.js:133:11)
    at ClientRequest.emit (events.js:127:13)
    at Socket.socketErrorListener (_http_client.js:394:9)
    at Socket.emit (events.js:127:13)
    at emitErrorNT (internal/streams/destroy.js:64:8)
    at process._tickCallback (internal/process/next_tick.js:152:19)
     name: 'FetchError',
     message: 'request to http://localhost:8339 failed, reason: connect ECONNREFUSED 127.0.0.1:8339',
     type: 'system',
     errno: 'ECONNREFUSED',
     code: 'ECONNREFUSED' },
  message: 'Network error: request to http://localhost:8339 failed, reason: connect ECONNREFUSED 127.0.0.1:8339',
  extraInfo: undefined }
Error: Network error: request to http://localhost:8339 failed, reason: connect ECONNREFUSED 127.0.0.1:8339
    at new ApolloError (/Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:3113:28)
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2160:41
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2541:17
    at Array.forEach (<anonymous>)
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2540:18
    at Map.forEach (<anonymous>)
    at QueryManager.module.exports../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (/Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2535:22)
    at /Users/swerner/Workspace/temp/egde-test-graphql/build/server/main.js:2109:31
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

The realFetch.call is nothing I see here.

[swernerx]

I modified deepFetch like this locally:

function deepFetch(rootElement) {

  return reactTreeWalker(rootElement, function (element, instance) {
    if (instance && typeof instance.fetchData === "function") {
      const ret = instance.fetchData();
      if (ret instanceof Promise) {
        return ret.catch((err) => {
          console.log("[EDGE] Deep fetch failed: " + err);
        })
      }
    }

    return true;
  });
}

It seems to break but all related to the situation that the service is unreachable - which is okay.

I figure this code change is probably a good idea so that the server does not crash when a single request is failing.