Drop cache for dynamically generated queries.

[Geddard]

Hi there, I've been reading up on the docs and trying to find other people with my issues, but I can't figure out how to do this... I either end up with no caching at all or just not able to invalidate it.

The scenario is that I call my graphql endpoint with dynamically generated queries, i never know what are the contents of these, at mas i know which is a mutation or which is a normal query. But i can't know the names of the internal values.

From what i see in the docs, i can only invalidate cache with these exchanges (types don't work if I try to use the graphcache btw) but i need to specify the query key i want to drop the cache for... in my case i would like to just drop ALL cache one i do a mutation.

I also tried calling createClient({ url }) again after a mutation, but i get errors when i try to do another query after that, about some numeric id, or i just don't see any changes.

I have a recoil atom where i store the client

export const dataClientState = atom({
  key: 'dataClient',
  default: createClient({ url: DATA }),
});

So then i created a hook where i reset this state by recreating the client, but the cache doesn't seem to go away:

export const useMutation = () => {
  const [dataClient, resetDataClient] = useRecoilState(dataClientState);

  const clientRef = useRef(dataClient);

  useEffect(() => {
    clientRef.current = dataClient;
  }, [clientRef, dataClient, resetDataClient]);

  return <T = unknown>(query: DocumentNode) =>
    from(dataClient.mutation<T>(query).toPromise()).pipe(
      map(response => {
        resetDataClient(createClient({ url: DATA }));

        return response;
      })
    );
};

I gues that the ideal would be to be able to pass part of the dynamically generated query to mutation() and that should invalidate part of the cache? if not all??

I'm lost here and considering writing URQL out of my project... please help

[Geddard]

UPDATE: I thought it might an issue of the closure returned in the hook, but i extracted all the function and just pasted the call where i need it and the problem remains, calling createClient doesn't seem to invalidate cache...

[JoviDeCroock]

All right let's look at the problem first, what triggers this data to be different every time?

If it's you interacting with the data then a useMutation is needed to show these interactions.

If it's other people interacting with the data we will need a useSubscription.

If this one query is just truely dynamic try using fetchPolicy: 'network-only'.

What makes the query dynamic? Resetting the client shouldn't be needed? If possible reproduce it on codesandbox and we'll gladly point you in the right direction.

Sidenote: what about the graphCache types isn't working? Just tried it and worked.

[Geddard]

Because the order of your exchanges is odd, switch cache and fetch like in the docs

Heh the order is not mentioned anywhere, checking

[Geddard]

Because the order of your exchanges is odd, switch cache and fetch like in the docs

with the order changed the cache works, but it's not invalidated

[kitten]

As I mentioned before the mutation field will have to be used. MainQuery doesn't sound like a field on the Mutation type.

[Geddard]

As I mentioned before the mutation field will have to be used. MainQuery doesn't sound like a field on the Mutation type.

i don't understand.

This is literally the query I'm using, it works perfectly on GraphiQL

mutation {
  MainQuery {
    CodeSearch(search: "asd") {
       value
     }
  }
}

i tried calling cache.invalidate with MainQuery or CodeSearch, same result always no cache removed

[Geddard]

And by the way, if i wanted to use the additionalTypenames, would it be like this?
EDIT: I've realized that the second param is variables, so i updated the function to pass an empty object first, but i get the same results , tried with MainQuery or CodeSearch or both and the cache for this call is not dropped

from(
      dataClient
        .mutation<T>(query, {}, { additionalTypeNames: ['MainQuery'] })
        .toPromise()
    );

To clarify, the queries to which i do the mutation and from where i do the search afterwards are different... maybe that's a problem for urql too?

examples:

the queries would be executed in this order

{
  MainQuery {
    CodeSearch(search: "asd") {
      value // returns asd002 as suggestion because asd001 exists
    }
  }
}

mutation {
  MainQuery {
    UpdateSource(input: { code: "asd002" }) {
       output {
         code
       }
     }
  }
}

{
  MainQuery {
    CodeSearch(search: "asd") {
      value // should return asd003 since i just updated the DB with a new code, but i get the cached results from the 1st query
    }
  }
}

[Geddard]

It took me a while to understand how to fix this, here's the solution
#1339 (comment)