Query is refetched even after component is unmounted

Help
,
1

Hello,

I have a component A which calls listNotifications query with a specific Schema and variables, and its rendered in the Dashboard page.

I have another component B which calls the same query with different Schema and different variables, and its rendered in the Header (thus in all pages).

In component B I have also a button which does a mutation markNotification and after that it manually updates the cache though the update function.

PROBLEM IS:
If I move out from Dashboard page to another page, component A is unmounted.
However when I click the button from Component B which triggers the mutation, I see in the network that also the listNotifications of Component A is being called.

Why? Shouldn’t it be called only if the component A is mounted?

Moreover I don’t even understand why after the query of Comp A is refreshed even when it is mounted. What is the logic that Apollo applies to decide when to refresh a query or not?

Additional details:

  • I have a fetchPolicy globally set in the ApolloClient as { fetchPolicy: 'cache-and-network', nextFetchPolicy: 'cache-first' }.
  • Apollo dev tools never remove the listNotifications of component A from the list of Active Queries, don’t know why. Rather it adds one of the same to the list every time I re-enter the Dashboard Page

EDIT:
The duplication of the query in the Apollo dev tools disappeared after update.
Still, the problem persist: even if the Component A is unmounted, its query is automatically refreshed when the cache is manually updated via cache.modify() (after the mutation from Component B)

Thanks to anyone who can help

2

Hi @davidecantelli, thanks for posting to the forum!

I’m curious what you mean about component A calling listNotifications and component B calling “the same query with different Schema and different variables.” Some sample code or a repo/codesandbox could help as well. Have a good day!

3

Hi @JeffAuriemma thanks for your quick reply!

What I mean is that I have two React components here called A & B fo simplicity.
Both components, when mounted, calls the query listNotifications passing different variables as payload and ask for different fields of the schema. For instance:

// COMPONENT A
const QUERY = gql`
  query listNotifications {
    notifications {
      id
    }
  }
`;
const res = useQuery(QUERY, { variables: { isRead: false, type: 'a' })
 
// COMPONENT B
const QUERY = gql`
  query listNotifications {
    notifications {
      id
     type
     name
     user
    }
  }
`;

const res = useQuery(QUERY, { variables: { isRead: false })

Make sense?

4

Thanks @davidecantelli - can you try using a different name for each unique query? E.g.

const QUERY_A = gql`
  query listNotificationsIdOnly {
    notifications {
      id
    }
  }
`;

const QUERY_B = gql`
  query listNotifications {
    notifications {
      id
      type
      name
      user
    }
  }
`;
5

I have tried but the problem is still there.

One thing I have noticed is that when Component A is mounted, listNotificationsIdOnly is listed twice in the Apollo dev tools - don’t know why - but removed only once when the Component A gets unmounted.
However in the Network there is only one request.

I’ve double checked that:

  • removing the query from the component will result in no calls at all to that query, which means no other components are calling that query
  • Component A is rendered only once in the page

Any idea @JeffAuriemma ?

6

@davidecantelli very interesting - thanks! What version of @apollo/client are you using and which browser? Is your dev tools extension or add-on up-to-date?

7

So, thanks for asking. Actually it was a while I didn’t reload Chrome , in fact it was waiting for updates of both itself and dev tools chrome extension. Now that’s updated I don’t see the duplication of queries in the Apollo dev tools anymore.

However it is still fetching the query again after the mutation, even if Component is unmounted. I can see it from network.

The version of @apollo/client is 3.6.9 - trying to upgrade it now

8

Updated to 3.7.1 but nothing changed.

9

It worth mentioning again that I am using cache.writeFragment() to manually update the fragment after the mutation.

I guess this should have impact on all the queries using that fragment, however it is still weird that the query of the unmounted Component A is still there in the cache.

10

Does anyone knows why the UNMOUNTED component’s query gets refetched after a cache modify?

11

@davidecantelli this smells like a bug to me. Would you be open to filing a bug for us to help us prioritize looking at this? If you can provide a reproduction, that would also go a long ways to figuring out whats going on. Thanks!

12

Thanks @jerelmiller.

Actually I have been spent more time on it and realized that, from the modify cache method, I was accidentally returning a data with a different structure. I didn’t know it could have such a side effect but it looks like that by fixing it, also the problem with unmounted component is fixed.

Thanks everyone for your help

1 Like
13

@davidecantelli great! Glad you were able to figure out what was going on!

1 Like