Discrepancy between useQuery Data and Network Response in Apollo Client

Help
,
1

I’m facing an issue with the useQuery hook in Apollo Client when fetching data based on dynamic filters. Here’s the query I’m using:

export const GET_EBOOKS_BY_PARAMS = gql(/* GraphQL */ `
  query GetEbooksByParams(
    $input: EbookParamsInput!
    $pagination: PaginationInput
  ) {
    getEbooksByParams(input: $input, pagination: $pagination) {
      _id
      nombre
      indice {
        ...IndiceEbookFragmentBasic
      }
      versiones {
        ...VersionFragment
      }
      portada {
        ...RecursoFragment
      }
    }
  }
`);

And this is the custom hook:

import {
	GetEbooksByParamsQuery,
	GetEbooksByParamsQueryVariables,
} from '@/graphql/generated/graphql';
import { GET_EBOOKS_BY_PARAMS } from '@/graphql/query/ebook.query';
import { QueryHookOptions, useQuery } from '@apollo/client';

export const useGetEbooksByParams = (
	options?: QueryHookOptions<
		GetEbooksByParamsQuery,
		GetEbooksByParamsQueryVariables
	>,
) => {
	const { data, ...rest } = useQuery(GET_EBOOKS_BY_PARAMS, options);

	return {
		ebooks: data?.getEbooksByParams ?? null,
		...rest,
	};
};

The problem arises when I change the filter, resulting in the following data being logged inside the hook/component:

{
  "versiones": [
    {
      "__typename": "Version",
      "_id": "",
      "nombre": "PROFESOR",
      "status": true
    },
    {
      "__typename": "Version",
      "_id": "",
      "nombre": "ALUMNO",
      "status": false
    }
  ]
}

However, the network response presents different values for the status field when the main query is executed. It returns a mix of true and false values, which is inconsistent with what’s logged.

I’m using a component for filtering and refetching data, and the filters can be as follows: {semestre: 1}.

Could you please assist in understanding why the status field values differ between the useQuery log and the actual network response after changing filters?

Thank you for your help!

2

Hey @AngelRmrz :wave:

Something I noticed right away is that your response returns no _id for each of those values. Without additional type policy configuration, Apollo Client uses the combination of __typename and id or _id to normalize entities returned from your response. Since you are returning the same __typename and _id for both entries, Apollo Client is going to think these are the same records and merge them together.

Can you try returning unique _ids for each of these from your server and see if this resolves your issue? This might be a good starting place :slightly_smiling_face:

1 Like
3

The thing is that the id is returning right, i just deleted the ids for safety and forget to mention it

4

Ah thank you! That’s helpful. Its a bit difficult to fully understand what might be happening here since it should be working correctly. Can you use Apollo Client’s devtools or run console.log(client.extract()) after the operation is done to check the contents of the cache? My guess is there is something in there that isn’t quite right.