different query key for queries and mutations

[ejarquin-applaudo]

I wan to reuse the query key to get data from the server and modify that query after mutation, but I am seeing different query keys to the same query

Query key on the left panel:
["/speedups/appdetails_appManager",{"customer_id":"55-6718-A000","frequency":30,"level":"appManager"}]

Query key on the right panel

[
  "/speedups/appdetails",
  {
    "level": "appManager",
    "frequency": 30,
    "customer_id": "55-6718-A000"
  }
]

the first item of the array is "/speedups/appdetails", but on the left panel is /speedups/appdetails_appManager

Problem 1 with getQueryData
Now, when I try to get cached data usingqueryClient.getQueryData using the query key on the left panel, it doesnt work, I need to use the query key from the right panel.

It doesnt work:

getQueryData([
  "/speedups/appdetails_appManager",
  {
    "level": "appManager",
    "frequency": 30,
    "customer_id": "55-6718-A000"
  }
])

It works:

getQueryData([
  "/speedups/appdetails",
  {
    "level": "appManager",
    "frequency": 30,
    "customer_id": "55-6718-A000"
  }
])

Problem 2 with setQueryData
Now, the opposite happens here, when I try to update cached data usingqueryClient.setQueryData using the query key on the right panel, it doesnt work, I need to use the query key from the left panel.

It works:

setQueryData([
  "/speedups/appdetails_appManager",
  {
    "level": "appManager",
    "frequency": 30,
    "customer_id": "55-6718-A000"
  }
])

It doesnt work:

setQueryData([
  "/speedups/appdetails",
  {
    "level": "appManager",
    "frequency": 30,
    "customer_id": "55-6718-A000"
  }
])

NOTE:
I am using the property: queryKeyHashFn to add the text appManager and modify the query key but Im seeing this behavior.

  return useQuery([
  "/speedups/appdetails",
  {
    "level": "appManager",
    "frequency": 30,
    "customer_id": "55-6718-A000"
  }
], {
// here I have a function to get the new query key, I just append the `_appManager` text to the first item of the query key array
    queryKeyHashFn: getQueryKeyHash('appManager'),
    enabled: Boolean(params?.customerId),
    ...config,
  });

export function getQueryKeyHash(submodule = '') {
  return (queryKey) => {
    const path = queryKey[0];
    const params = queryKey[1];
    return hashQueryKey([`${path}_${submodule}`, params]);
  };
}

[TkDodo]

I am using the property: queryKeyHashFn to add the text appManager and modify the query key but Im seeing this behavior.

why are you doing that? I don't think that's what this function is for. It is usually just for making sure that the queryKey is serializable. You can't expect to be able to access elements with the result of the hashQueryKey function. the result is always a string, but the input can be an array with objects as well.

so the query key you pass to getQueryData / setQueryData should always be the queryKey before being processed by the queryKeyHashFn.

[ejarquin-applaudo]

mmm good point, I didn't know about that last point, thanks @TkDodo

[JuanmaMenendez]

hi, @TkDodo can a mutation and query have the same key without issue?

[TkDodo]

sure