How to actually revalidate data in a globale mutate

[nahasco]

So this is my setup

I have a client page where I fetch the data with useSWR like this

const {data} = useSWR<PostType>("post/1/", (url) => fetcher(url))

I use a custom fetcher where I configure my api url, request method, and data before sending the requets.

import { API_URL } from "../config"
import { getSession } from "next-auth/react"
import Cookie from "js-cookie"

async function fetcher<JSON = any>(url: string, method?: string, body?: {}): Promise<JSON> {
    const session = await getSession()
    const profileID: string = Cookie.get("profileID") ?? ""

    if (!session) {
        // Handle the case where the user is not authenticated
        console.error("User is not authenticated")
        throw new Error("User is not authenticated")
    }

    // @ts-ignore
    const accessToken = session?.access_token

    try {
        const response = await fetch(`${API_URL + url}`, {
            method: method ? method : "GET",
            headers: {
                Authorization: `Bearer ${accessToken}`,
                "Content-type": "application/json",
                "profile-id": profileID,
            },
            body: body ? JSON.stringify(body) : undefined,
        })

        const data = await response.json()

        if (!response.ok) {
            const errorData = {
                status: response.status,
                statusText: response.statusText,
                data,
            }
            throw errorData
        }

        return data
    } catch (error) {
        throw error
    }
}

export default fetcher

What I usually did was pass the bound mutate function down my components to where I need to call it (prop drilled it) to revalidate data and so on.

However I would like to call mutate remotely using the global muate function like I see in the docs.

Only issue is I have no idea how to do that. I am just not understanding the docs. They seem to just call the mutate function with a "key" which I assume is the...url? Not clear but tried it and it didnt work.

Any help is really appreciated...

[GodsonAddy]

Try this:

/mutation.js

import React, { useEffect } from "react";
import axios from "axios";
import { mutate} from "swr";
import { unstable_serialize } from "swr/infinite";

const liveQueries = new Set();

export const trackLiveQueries = (useSWRNext) => {
  return (key, fetcher, config) => {
    const swr = useSWRNext(key, fetcher, config);
    useEffect(() => {
      liveQueries.add(key);

      return () => {
        liveQueries.delete(key);
      };
    }, [key]);

    return swr;
  };
};

export async function revalidateQueries() {
  const promises = [...liveQueries.values()].filter(Boolean).map((key) => {
    if (typeof key === "function") {
      return mutate(unstable_serialize(key));
    } else {
      return mutate(key);
    }
  });
  console.log("promises", promises);
  return Promise.all(promises);
}

So trackLiveQueries, tracks all APIs being fetched in a particular page when you use useSWR OR useSWRInfinite. So when you create/update/delete a post, it now revalidates all the APIs being tracked in that page. unstable_serialize is for useSWRInfinite, but it keeps long revalidating data. I'm yet to find a better solution for it.

/app.js

import { SWRConfig } from "swr";
import { trackLiveQueries } from "./mutation";

const fetcher = async (url) => await axios.get(url).then((res) => res.data);

const App = () => {
return (
<SWRConfig
            value={{
              fetcher,
              use: [trackLiveQueries],
            }}
          >
<Component />
          </SWRConfig>
)
}

/Component.js

import {revalidateQueries} from "./mutation";

const Component = () => {
const CreatePosts = async() => {
try{
await axios.post("/api/create-posts");
await revalidateQueries()
}catch(err){
console.log(err)
}
}
return (
<div>
<button onClick={CreatePosts}>Create Posts</button>
</div>
)
}