Errors are swallowed

[Sicria]

When rendering on the server it seems like errors of requests are swallowed and are never sent to the render.

Here's an example, assume the response contains no data and has an errors array with 1 error.

const query = graphql`
  query HomeItemsQuery {
    items(first: 5) {
      ...ListItems_items
    }
  }
`;

const Home = () => {
  const { props, error } = useQuery(query);
  console.log({ error, props });

  // Error State
  if (error) return <div>Error: {error.message}</div>;

  // Loading State
  if (!props) return <div>Loading items...</div>;

  // Success State
  return <ListItems items={props.items} />;
};

When this component is rendered, it logs { error: null, props: { items: null } } which causes an issue when trying to display the data.

On the server I'm doing the double render used in https://github.com/relay-tools/react-relay-network-modern-ssr and logging the response of the await relayServerSSR.getCache() shows the correct response, including the errors.

This works fine on the client, it loads the request and fails correctly passing through the error.

[morrys]

Hi @Sicria, I think the problem is caused by the data {items: null} in the cache and the store-or-network policy (default policy). The relay check considers the data is available and therefore it is not made the request in the network.

[Sicria]

Hi @morrys thanks for getting back to me, do you know if there's a way around this? Is it a change which needs to happen on the GraphQL endpoint or something that is client-side?

I know GraphQL can do partial errors where some of the data can exist, and some errors can also be returned, is it possible to handle partial errors with relay-hooks?

[morrys]

Hi @Sicria, have you tried using the fetchPolicy store-and-network?

[Sicria]

@morrys Just tried that with no luck, the request on the server goes directly to the network to fetch the data for the store when sent to the frontend for SSR.

The error is thrown on the server via the first network attempt, which causes the SSR to fail by loading with empty data, even though there is an error which is returned, but is not given to the component via the hook.

[morrys]

@Sicria, to understand, I make a brief summary:

• no SSR

  • the client makes the request: the server fails and the client correctly displays the error

• SSR (policy store-and-network)

  • the server fails
  • populates the network cache
  • the client displays partial data (store)
  • does the client make the request on the server (or retrieve the response from the cache?
  • fetch returns an error (?)
  • the error is not displayed (?)

I need more detail to better understand both the problem and its real cause.

[Sicria]

No SSR:

• Client makes the request
• Server returns an error
• Client passes the error down to the component

SSR:

• Request is made to the server, on the server
• Server returns an error
• Inside the component the props have an empty data structure and no errors

So the request is made on the server and when it's being rendered on the server, there are no errors being returned to the component.

But if the request is made on the client, the errors are returned to the component.

[morrys]

Is this problem also present when using the react-relay HOC?

Can you create a minimal project or modify this project in order to recreate the error?

[Sicria]

Can confirm this is occurring with the react-relay HOC as well, I'll do a bit more investigating and see if I can figure it out.