when do query keys "match fuzzily"

[stefanprobst]

the docs on how query keys are matched in methods like invalidateQueries are not very clear to me. what exactly does "fuzzy matching" mean in this context?

for example, the following two keys will not match:

["entity", "list", { filter: "" }]
["entity", "list", null]

but these two will:

["entity", "list", { filter: "" }]
["entity", "list"]

could someone please clarify? thanks!

[TkDodo]

I'm definitely up for making that page better, but I also don't understand your example when you say "these two will:

["entity", "list", { filter: "" }]
["entity", "list"]

which of these is the cache key, and which is the thing you pass to e.g. invalidateQueries? Because that makes a big difference 😅

[stefanprobst]

sorry for being unclear. so i am doing something similar to this:

import { useQuery, useQueryClient } from "react-query";

async function getEntities() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return { entities: [] };
}

export default function Page() {
  const client = useQueryClient();

  const first = useQuery(["entity", "list", { filter: { q: "" } }], getEntities);
  const second = useQuery(["entity", "list", null, null], getEntities);

  function invalidate() {
    // client.invalidateQueries(["entity", "list"]);
    client.invalidateQueries(["entity", "list", null]);
    // client.invalidateQueries(["entity", "list", {}]);
    // client.invalidateQueries(["entity", "list", { q: "" }]);
    // client.invalidateQueries(["entity", "list", { filter: {} }]);
    // client.invalidateQueries(["entity", "list", { filter: { q: "" }, q: "" }]);
  }

  return (
    <main>
      <div>First query is fetching: {String(first.isFetching)}</div>
      <div>Second query is fetching: {String(second.isFetching)}</div>

      <button onClick={invalidate}>Invalidate</button>
    </main>
  );
}

[TkDodo]

okay so arrays have an order, which means that when you invalidate with ["entity"], all of your examples are "matched" because they start with entity. "start with" as in fully matches the first element in the array. So the key ["entity-one"] would not be matched by ["entity"], but ["entity", "one"] would be matched by it.

If you have the two keys as you showed:

["entity", "list", { filter: { q: "" } }],
["entity", "list", null, null]

invalidating ["entity"] or ["entity", "list"] would match both of them, while ["entity", "list", null] would only match the second one.

objects are like arrays, except that they have no order.

• ["entity", "list", {}] would match ["entity", "list", { filter: { q: "" } }], because an empty object is "part of" every object.
• ["entity", "list", { q: "" }] would not match it because you have no q field on the 3rd element, you have filter