Relay: onComplete callback after refetch returns null instead of data

[ben-elsen]

Description of the issue/bug

The onComplete callback after a refetch doesn't recieves the data of the refetch but 'null'.

Example code

const [pendingProcesses, refetchPendingProcesses] = useRefetchableFragment(
    graphql`
      fragment Cardbuilder_getPendingProcesses on Query
        @refetchable(queryName: "CardGridRefetchPendingProcessesQuery"){
        niche(identifier: $id){
          pendingProcesses(filter: SYNC_AIRTABLE){
            id
          }
        }
      }
    `,
    data,
  );

return (
<Button onClick={() => {
          startTransition(() => {
            refetchPendingProcesses({ id: '016366b4-00ac-4675-a3e7-c0d33635007f' }, {
              fetchPolicy: 'network-only',
              onComplete: (data) => {
                console.log(data);
              },
            });
          });
        }}
        >
          Translate Comment
</Button>

)

In this example, the console returns null but in the network tab, I see that the network call returns data.

Versions:

"react-scripts": "3.4.0",
"graphql": "^15.3.0",
"react": "0.0.0-experimental-94c0244ba",
"react-dom": "0.0.0-experimental-94c0244ba",
"recoil": "^0.0.13",
"relay-config": "^10.0.1",
"relay-runtime": "^10.0.1",
"react-relay": "^10.0.1",
"babel-plugin-relay": "^10.0.1"

[maraisr]

Have you got your network function handy?

[ben-elsen]

How do you mean @maraisr ?

[maraisr]

Ah I see what's the problem! The onComplete doesnt give back the data, it gives back if there was an error or not.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/de8f6729e3505a6e98634c4a20c246b37f98d2e0/types/react-relay/lib/relay-experimental/useRefetchableFragmentNode.d.ts#L64

If you're using typescript, I'll PR a fix to rename that to something more obvious.

[ben-elsen]

Oh ok, I missed that! Thanks for pointing that out!

I am not using typescript (yet) but renaming that would seem a great idea!

[maraisr]

Please do reach out if you need any other help! 🙏

[ben-elsen]

Thanks a lot and I will do so!

[ben-elsen]

@maraisr You told me to reach out when needed.. :-) How can I access the data that is returned from a mutation if the onComplete doesn't do that? The documentation isn't correct so I am a bit stuck or confused.

https://relay.dev/docs/en/experimental/a-guided-tour-of-relay#graphql-mutations

...
onCompleted?: ?(
    response: $ElementType<TMutation, 'response'>,
    errors: ?Array<PayloadError>,
  ) => void,
...

I want to be able to return an Error object from the backend to notify the frontend if someone isn't autherized to trigger an mutation.

Thanks in advance!

[maraisr]

Hi @ben-elsen yeah no stress. There is a slack channel you can ask questions too if you ever get stuck (https://graphql.slack.com/messages/relay).

As per your question; so the general idea is that:

• if a "critical" error occurred, such that the errors array is populated, the idea is to "throw" an exception in your network layer.
• which means the component making the call, would hit an error boundary. For you to handle there. (that is for queries)

Now for mutations, yes the same thing would apply, however youd get that in the form of onComplete using the errors arg, or the onError:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cc26a09ae59d6c1cdc0b2ed4e8a41aa075eafc1e/types/react-relay/lib/relay-experimental/useMutation.d.ts#L21-L22

Granted I've never personally needed to use this, so let me know how you fair.

[ben-elsen]

Hi @maraisr ok that is more clear now! For some reason, I was confused about this.