Unhandled Errors with Query SSR (Next.js)

[apjoseph]

It looks like GraphQLClient is leaving server errors unhandled instead of passing them to the query result:

This can be reproduced easily by simply running the 5-nextjs example from this repo with the Apollo server middleware in index.js commented out. The 404 error is left unhandled instead of being displayed as text in the component.

export const AllTodosView = observer(() => {
  const { error, data, loading, query } = useQuery(store  => {
    return store.queryTodos({}, todoSelector)
  })
  if (error) return error.message
  if (!data) return "Loading..."
  return (
    <>
      {data && <TodosList todos={data.todos} />}
      {loading ? (
        "Loading..."
      ) : (
        <button onClick={query!.refetch}>Refetch</button>
      )}
    </>
  )
})

[apjoseph]

Looks like this issue is being caused by __pushPromise on MSTGQLStore. Promise resolves and page renders correctly, if this this line is commented out. Am a bit perplexed as to how this is happening since the error is caught and handled within the chain.

[odjhey]

mst-gql/src/Query.ts

Lines 117 to 124 in 926d8a7

	promise = promise.then((data: any) => {
	// cache query and response
	if (this.fetchPolicy !== "no-cache") {
	this.store.__cacheResponse(this.queryKey, this.store.deflate(data))
	}
	return this.store.merge(data)
	})
	this.promise = promise

im not sure of the right solution but i have patched mine to add a catch block for this promise that looks like so

 promise = promise.then((data: any) => { 
   // cache query and response 
   if (this.fetchPolicy !== "no-cache") { 
     this.store.__cacheResponse(this.queryKey, this.store.deflate(data)) 
   } 
   return this.store.merge(data) 
- })
+ }).catch((error) => {
+   this.loading = false
+   this.error = error
+ })
 this.promise = promise 

let me know if this solves your issue.

[apjoseph]

@odjhey that doesn't have any impact

[Benz19]

Hi @apjoseph Im trying to help clean up all the open issues.. Did you still have this problem?