In next-app, at [email protected], use global SWRConfig and cache meet with window is undefined. #2009

lichangyuan1993 · 2022-06-03T14:17:37Z

lichangyuan1993
Jun 3, 2022

enviroment: react 18.1.0 , nextjs 12.1.6, swr 1.3.0.

I want to use global cache in swr, so I use localStorageProvider according to swr's documentation, but the browser prompts

now, i need help ！！！

_app.js

import React from "react";
import Layout from "@/components/layout";
// const DynamicSWRConfig = dynamic(import('swr'), {ssr: false});// 服务器端动态导入
import SWRConfig from 'swr';
import axios from "axios";
// import dynamic from 'next/dynamic'
// const DynamicSWRConfig = dynamic(import('swr').then((mod) => mod.SWRConfig), {ssr: false});

// refer swr site
const fetcher = (url) => axios.post(url).then(res => res.data);
function provider() {
    console.log("in storageProvider.js, window is", typeof window !== "undefined");
        // 初始化时，我们将数据从 `localStorage` 恢复到一个 map 中。
        const map = new Map(JSON.parse((window.localStorage.getItem('app-cache') || '[]')))

        // 在卸载 app 之前，我们将所有数据写回 `localStorage` 中。
        window.addEventListener('beforeunload', () => {
            const appCache = JSON.stringify(Array.from(map.entries()))
            window.localStorage.setItem('app-cache', appCache)
        })

        // 我们仍然使用 map 进行读写以提高性能。
        return map;

}


export default function MyApp({Component, pageProps}) {
    console.log("in _app.js, window is", typeof window !== "undefined");
    return (
        <ConfigProvider locale={zhCN}>
            <SWRConfig value={{provider,fetcher}}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>
            </SWRConfig>
        </ConfigProvider>
    )
}

pages/third.js

import React from "react";
import useSWR from 'swr';
import Head from "next/head";
import styles from './index.module.css';
import {fetch} from 'lib/remote-server'



console.log("outside third.js");

export default function Third(props) {
    const [flag, setFlag] = React.useState("");

   // 这是一个跨域请求（cross-domain request），我在axios中配置了base_url，我很确定这里没有问题。
    const {data, error} = useSWR('/category/all', fetch);
    React.useEffect(() => {
        console.log("data", data);
    }, [data]);

    if (error) return "An error has occurred.";
    if (!data) return "Loading...";

    return (
        <>
            <Head>
                <title>第三页</title>
            </Head>
            <div>
                <h1>{"Third Title"}</h1>

        </>
    );
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

In next-app, at [email protected], use global SWRConfig and cache meet with window is undefined. #2009

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

In next-app, at [email protected], use global SWRConfig and cache meet with window is undefined. #2009

Uh oh!

Uh oh!

lichangyuan1993 Jun 3, 2022

Replies: 0 comments

lichangyuan1993
Jun 3, 2022