Help to avoid repeated calls of apollo-client the parent component when called in the child component with the matching __typename

Help
,
1

Hi! Help to avoid repeated calls of apollo-client the parent component when called in the child component with the matching __typename

2

I’m not sure what you are describing here, could you please describe the problem in more detail and add some code examples for the parent and child components?

3

After upgrading from react-apollo to apollo/client@3.11.8 in the parent component, the query call and, accordingly, all subsequent children began to be called again, since one child has a query call, which, like in the parent, returns data : { apiDetails: { __typename: “ApiDetails”, …}
But the properties in the parent and child apidetails are partially the same, but mostly different

4

I really need more than two sentences to make sense of this, I’m sorry. Please really provide code examples.

Generally, upgrading from react-apollo would mean that you are coming from Apollo Client 2 - that is outdated by about 4 years at this point. You will definitely see changes in behaviour and might need to revisit the code.

5

export const QueryApiDetailsDocument = gql query QueryApiDetails($id: ID!, $contour: ContourFilter) { apiDetails(id: $id, contour: $contour) { info { id qualifiedName shortName shortDescription fullDescription deprecated } subscriptionInfo { isActive } versionDetails { info { programProduct } } } } ${ApiVersionInfoFieldsFragmentDoc};

export function useQueryApiDetailsQuery(baseOptions: Apollo.QueryHookOptions<QueryApiDetailsQuery, QueryApiDetailsQueryVariables> & ({ variables: QueryApiDetailsQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
const options = {…defaultOptions, …baseOptions}
return Apollo.useQuery<QueryApiDetailsQuery, QueryApiDetailsQueryVariables>(QueryApiDetailsDocument, options);
}

export const QueryApiOperationsDocument = gql query QueryApiOperations($apiId: ID!, $majorVersion: Int!, $minorVersion: Int!, $patchVersion: String!, $snapshot: Boolean!, $search: String!, $page: PageRq) { apiDetails(id: $apiId) { info { id parentArtifact { id code } versionDetails(for: {majorVersion: $majorVersion, minorVersion: $minorVersion, patchVersion: $patchVersion, snapshot: $snapshot}) { info { majorVersion minorVersion patchVersion snapshot archReview { status comment } } searchOperations(query: $search, page: $page) { pageInfo { hasNext cursor } } } } } ;

export function useQueryApiOperationsQuery(baseOptions: Apollo.QueryHookOptions<QueryApiOperationsQuery, QueryApiOperationsQueryVariables> & ({ variables: QueryApiOperationsQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
const options = {…defaultOptions, …baseOptions}
return Apollo.useQuery<QueryApiOperationsQuery, QueryApiOperationsQueryVariables>(QueryApiOperationsDocument, options);
}

index.tsx
export const ApiPage: FC = props => {

const baseOptions: QueryHookOptions<any, QueryApiDetailsQueryVariables> & ({ variables: QueryApiDetailsQueryVariables }) = {
variables: getQueryVariables(props),
notifyOnNetworkStatusChange: true,
fetchPolicy: ‘network-only’,
};
const { loading, error, data, client } = useQueryApiDetailsQuery(baseOptions);
…
if (error) {
return ;
}
if (!loading && !data ) {
return

Data not found
;
}
return (
<>
…
<ApiContent {…data} />
<>
)}

ApiContent.tsx
export const ApiContent: FC = (props) => {
…
const baseOptions: QueryHookOptions<QueryApiOperationsQuery, QueryApiOperationsQueryVariables> & ({ variables: QueryApiOperationsQueryVariables }) = {
variables,
fetchPolicy: ‘network-only’,
};

const { loading, error, data, fetchMore } = useQueryApiOperationsQuery(baseOptions);
…
if (error) {
return ;
}
if (!loading && !data ) {
return

Data not found
;
}
return (

data
)}

export default new ApolloClient({
link: retryLink.concat(errorLink.concat(httpLink)),
cache: new InMemoryCache(),
connectToDevTools: true
});

In these two requests, data.apiDetails arrives and apparently receiving data in the ApiContent Api triggers a repeat call in the parent component. How can this be fixed?

6

Looking at those queries, I see that they are significantly overlapping, but a lot of the data doesn’t have id fields, so Apollo Client cannot know that they describe the same object and can safely be merged together in the cache, or if they describe different objects that cannot be merged.

So Apollo Client goes the safe route of “not merging” and overrides the data. That means that data required to display a different component is lost, though, and the client makes another query.

So, I would suggest that first, you add id everywhere it is possible, and if that doesn’t help that you ensure that you run on a debug build of Apollo Client, as that will warn you on the console in cases where it needs to discard data. This should be enabled by default, but maybe you already disabled that - you can double-check Reducing bundle size - Apollo GraphQL Docs on that.

1 Like
7

Your assumption was correct. I added an additional id and the extra calls went away. Thank you very much for your help