Why is my query hook not returning the same result as seen in the network tab of my browser?

Question

I have several GQL queries in my React application. One of them, when in error, has an odd behavior : the result returned by the hook is different from what I see in my browser's network tab.

Here's what is received (as seen in my browser) :

{
    errors: [
        {
            message: "very long message explaining the error",
            extensions: {}
        },
        {
            message: "very long message explaining the error",
            extensions: {}
        },
    {
            message: "very long message explaining the error",
            extensions: {}
        },
       (...)
    ],
    data: {
        elements: {
            edges: [
                {
                    id: "fakeElementId",
                    name: "fakeElementName",
                },
        {
                    id: "fakeElementId2",
                    name: "fakeElementName2",
                },{
                    id: "fakeElementId3",
                    name: "fakeElementName3",
                },
                (...)               
            ],
            totalCount: 22,
            __typename: "PaginatedElementsResponse"
        }
    }
}

And here's what I see if I log the results of the same query from my hook :

{
  called: true,
  client: { … },
  data: undefined,
  error: {
    Error: "very long message explaining the error very long message explaining the error very long message explaining the error (...)",
    clientErrors: [],
    columnNumber: 24,
    extraInfo: undefined,
    fileName: "myFileName",
    graphQLErrors: [
      {
        message: "very long message explaining the error",
        extensions: {}
      },
      {
        message: "very long message explaining the error",
        extensions: {}
      },
      {
        message: "very long message explaining the error",
        extensions: {}
      },
      (...)
    ],
    lineNumber: 426,
    message: "very long message explaining the error very long message explaining the error very long message explaining the error (...)",
    networkError: null,
    stack: "myStack",
  },
  fetchMore: BoundFunctionObject { … },
  loading: false,
  networkStatus: 8,
  observable: { isTornDown: false, queryId: "fakeId", queryName: "myElementsQuery", … },
  previousData: undefined,
  refetch: BoundFunctionObject { … },
  reobserve: BoundFunctionObject { … },
  startPolling: BoundFunctionObject { … },
  stopPolling: BoundFunctionObject { … },
  subscribeToMore: BoundFunctionObject { … },
  updateQuery: BoundFunctionObject { … },
  variables: { … },
}

The errors are here (nested, under the graphQLErrors name), but not the data. What I'd like is to be able to retrieve what is in data, even though there are errors. But right now, I can't seem to do that.

Answer 1

You might need to check the error policy set in your GraphQL client configuration.
By default, Apollo Client (assuming you are using Apollo) does not include the data in the response object if any errors are present. To change this behavior, you can adjust the error policy in your query hook to 'all', which allows both data and errors to be returned.

Your query hook would look like:

const { data, error } = useQuery(YOUR_QUERY, {
  variables: YOUR_VARIABLES,
  errorPolicy: 'all' // That line changes the error policy
});

That modification tells Apollo Client to include both data and errors in the response, if available.

---

The OP FE-P confirms in the comments:

I also had to add an onCompleted on my query since data was empty anyway, but yes, errorPolicy: "all" was the solution.

The onCompleted callback in a GraphQL query using Apollo Client is added as an option alongside other options like errorPolicy. That callback is triggered when the query successfully completes and returns data. It is a useful place for handling the successful data response, especially in cases where you need to perform actions once the data is fetched and available.

Your query would be, to include the onCompleted callback:

const { data, error } = useQuery(YOUR_QUERY, {
  variables: YOUR_VARIABLES,
  errorPolicy: 'all', // Include both data and errors in the response
  onCompleted: (receivedData) => {
    // Handle the successfully fetched data
    // 'receivedData' contains the data returned by the query
    console.log('Query completed with data:', receivedData);
  }
});

Here, onCompleted is a function that takes the fetched data as an argument (receivedData in this example). That function will be executed once the query successfully completes.
Note: onCompleted only triggers if the query successfully fetches data, and it does not trigger if the query results in an error.

Note (bis): the onCompleted callback is optional and is typically used for additional data processing or triggering side effects once the data is available.