Hooks - Suspended `useFragment` component not throwing underlying fetchQuery error

[azz]

Say I have a container component which just spreads fragments (i.e., does not suspend):

function Container() {
  const data = useLazyLoadQuery(graphql`
    query ContainerQuery {
      ...Component_data
    }
  `);
  return <Component data={data} />;
}

And then a fragment component:

function Component(props) {
  const {viewer} = useFragment(
    graphql`
      fragment Component_data on Query {
        viewer { id }
      }
    `,
    props.data
  );
  return viewer.id;
}

When Component is rendered, it suspends correctly, however if the fetchQuery promise for ContainerQuery rejects with an error, instead of that error being propagated from the useFragment callsite, the useFragment returns an empty dataset (e.g. viewer is undefined above).

There are two issues here:

• The fetchQuery error is silently ignored.
• The return value of useFragment does not match its flow type (viewer is not nullable).

[sibelius]

Can you share your network layer code?

[azz]

Here is a cut-down version of fetchQuery:

function fetchQuery(operation, variables) {
  return fetch('/graph', {
    method: 'POST',
    headers: {},
    body: JSON.stringify({ query: operation.text, variables }),
  }).then(async response => {
    if (!response.ok) {
      throw new Error('oh no!');
    }
    const json = await response.json();
    return json;
  });
}

[akiym]

I hit the same problem. My reproduction code is here: https://codesandbox.io/s/ecstatic-sanne-dqyeo?file=/src/TodoApp.tsx

[audiolion]

Also ran into this error, I expected the error boundary to be hit but the suspended app resolves and tries to render instead.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[audiolion]

bad stalebot

[abilash-arista]

I'm hitting the same error as well. An error thrown from inside the fetchQuery function, isn't getting caught by the error boundary. Instead it is trying to render the Fragment and throwing an error "Uncaught TypeError: Cannot read properties of undefined (reading 'name')".

[levibuzolic]

@abilash-arista using UNSTABLE_renderPolicy: 'full' or React concurrent mode should work around this issue, more details in #4146

[abilash-arista]

@abilash-arista using UNSTABLE_renderPolicy: 'full' or React concurrent mode should work around this issue, more details in #4146

@levibuzolic Awesome, thanks for pointing me to the correct issue! Using React concurrent mode fixed it for me.