Support arrays and objects as query keys

[khalibloo]

Sometimes, a string just isn't enough to reliably represent a query key. In a case where you have many params in a request, such as filters, and sorting options, it becomes cumbersome to have to convert it all into a string, while also ensuring that the order of the concatenation is consistently preserved.

React query allows arrays of strings and objects as query keys. It would be nice to have that convenience in Rakkas as well.

[cyco130]

I'm working on a full react-query integration to make this and all other nice features available in Rakkas. Until then you can use, e.g., useQuery(JSON.stringify(["my", "array", "key"]), () => ...) or create your own wrapper function that serializes the key.

[nitedani]

I'm working on a full react-query integration to make this and all other nice features available in Rakkas. Until then you can use, e.g., useQuery(JSON.stringify(["my", "array", "key"]), () => ...) or create your own wrapper function that serializes the key.

This won't invalidate useQuery(JSON.stringify(["items", "123"])) if I call client.invalidateQueries(JSON.stringify(["items"])) will it?

[cyco130]

This won't invalidate useQuery(JSON.stringify(["items", "123"])) if I call client.invalidateQueries(JSON.stringify(["items"])) will it?

No but this will:

client.invalidateQueries((k) => k.startsWith(`["items"`))

as a workaround for now.

Please bear with me as I experiment with various APIs for plugins. Real react-query integration will almost certainly be the first plugin.

[nitedani]

Take your time, all is good :)
Here is the workaround I use for now:

export const createQueryKey = (key: (string | number)[]) => JSON.stringify(key);
export const invalidateQuery = (
  client: QueryClient,
  key: (string | number)[]
) => {
  client.invalidateQueries((_key) => {
    const isJson = _key.startsWith("[") && _key.endsWith("]");
    if (!isJson) return false;
    try {
      const parsed = JSON.parse(_key);
      if (!Array.isArray(parsed)) return false;
      return key.every((k, i) => k === parsed[i]);
    } catch (error) {
      return false;
    }
  });
};