How do I imperatively revalidate everything on the page?

[hazae41]

Let's suppose the user made an action that changed a big part of the page.

How do I refresh everything, without calling "revalidate" or "mutate" on every single hook?

I thought of simulating a focus on the page, but is there a cleaner way of doing this?

[shuding]

With the latest cache API you can do this: https://swr.vercel.app/docs/advanced/cache#mutate-multiple-keys.

[nandorojo]

@shuding how would this work with array keys? I use arrays for all my keys rather than strings.

[samselikoff]

I'd love to see an example of the most idiomatic way to do this! Invalidate the cache for all currently active useSWR queries.

Use case is deeply nested components that have forms that create data. Instead of passing down callbacks with bound mutate from the parents with the queries to call after the new data is created, it'd be great to just call a single global function that revalidates all active queries.

[nandorojo]

You can follow the example linked to in this answer. Remove the matcher and the conditionals; that will revalidate everything.

[samselikoff]

Everything in the cache or everything in the cache that’s currently rendered? Was hoping for the latter.

[samselikoff]

I wanted to stick with the default cache (the multiple keys section seemed too much and also didn't have the notion of active queries), so I went with my own hook:

// hooks/use-query.js
import { useEffect } from "react";
import useSWR from "swr";

const activeQueries = [];

export async function revalidateLiveQueries() {
  let allRevalidations = activeQueries.map((mutate) => mutate());

  await Promise.all(allRevalidations);
}

export default function useQuery(key, options) {
  let { data, error, mutate } = useSWR(key, options);

  useEffect(() => {
    activeQueries.push(mutate);

    return () => {
      let i = activeQueries.indexOf(mutate);
      if (i > -1) {
        activeQueries.splice(i, 1);
      }
    };
  }, [mutate]);

  return { data, error };
}

I have a useMutation() hook that now calls revalidateLiveQueries() after each mutation:

// hooks/use-mutation.js
import { request } from "@/lib/data";
import { revalidateLiveQueries } from "./use-query";

export default function useMutation(mutation) {
  return [
    async function (variables = {}) {
      let res = await request(mutation, variables);
      await revalidateLiveQueries();

      return res;
    },
  ];
}

and so far it's working great!

[samselikoff]

I'm guessing yes since there are examples of calling mutate() outside of render

swr/examples/prefetch-preload/pages/index.js

Line 11 in 3d380e2

mutate('/api/data', data, false)

[shuding]

Nice way to get active hooks! 👍 In 1.0 (currently in beta) you can build it as a middleware (or publish as a lib): https://swr.vercel.app/docs/middleware

Ideally:

const { revalidateAll } = useSWR(k, f, { use: [revalidateAllMiddleware] })

Or configure it globally via SWRConfig.

[shuding]

When calling mutate(data), if there’s no hook with a specific key mounted, data will be written into the cache but it cannot trigger a refetch because there’s no fetcher anymore.

[nandorojo]

Middleware looks great!

The only missing piece I see is type safety. I wonder if this could be achieved somehow with declaration merging.

[shuding]

Yeah, declaration merging is on our radar!