next.js SWR全局配置

5t7ly7z5 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(172)

我想设置全局SWRConfig，如下所示：//_app.js文件（next.js）

import '@/styles/bootstrap.min.css';import "@/styles/globals.css";
import Layout from "@/components/Layout";import { SWRConfig } from "swr";

export default function App({ Component, pageProps }) {
return (<>
<Layout>
<SWRConfig value={{fetcher: async (url) => {const res = await fetch(url);  
          // If the status code is not in the range 200-299,
          // we still try to parse and throw it.
          if (!res.ok) {
            const error = new Error(
              "An error occurred while fetching the data."
            );
            // Attach extra info to the error object.
            error.info = await res.json();
            error.status = res.status;
            throw error;
          }
          return res.json();
        },
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  </Layout>
</> );}

字符串
但我不知道如何在next.js 13中执行此操作，其中app文件夹中的layout.js文件如下所示：

import './globals.css'import { Inter } from 'next/font/google'import Navbar from '@/components/Navbar';
const inter = Inter({ subsets: ['latin'] })
export const metadata = {title: 'Create Next App',description: 'Generated by create next app',}

export default function RootLayout({ children }) {return (

<html lang="en">
  <body className={inter.className}><Navbar /><br />{children}</body>
</html>
)}

型
我尝试用<SWRConfig>...</SWRCongig> Package html部分，但它不起作用，我得到错误。如果我可以设置一个全局提取器使用

<SWRConfigvalue={{fetcher: async (url) => {const res = await fetch(url);
          if (!res.ok) {
            const error = new Error(
              "An error occurred while fetching the data."
            );
          
            error.info = await res.json();
            error.status = res.status;
            throw error;
          }
          return res.json();
        },
      }}
    >

型
我不需要一遍又一遍地写。任何帮助都是感激的。

next.js

来源：https://stackoverflow.com/questions/76828080/swr-global-config

1条答案

按热度按时间

aoyhnmkz1#

<SWRConfig />基于React Context，这意味着它应该放在React客户端组件中。
Next.js Documentation提供了有关使用React Context和Next.js App Router的广泛指导：https://nextjs.org/docs/getting-started/react-essentials#context
在这种情况下，尝试创建一个新文件app/context/swr-provider.js：

// src/components/swr-provider.tsx
export const MySWRProvider = ({ children }) => (
  <SWRConfig value={{
    fetcher: async (url) => {
      const res = await fetch(URL);
      // If the status code is not in the range 200-299,
      // we still try to parse and throw it.
      if (!res.ok) {
        const error = new Error(
          "An error occurred while fetching the data."
        );
        // Attach extra info to the error object.
        error.info = await res.json();
        error.status = res.status;
        throw error;
      }
      return res.json();
    },
  }}>
    {children}
  </SWRConfig>
);

字符串
在app/layout.js中，导入<MySWRProvider />：

// app/layout.js
import './globals.css';
import { Inter } from 'next/font/google';
import Navbar from '@/components/Navbar';
const inter = Inter({ subsets: ['latin'] });

import { MySWRProvider } from './context/swr-provider.js'

export const metadata = { title: 'Create Next App', description: 'Generated by create next app', }

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/** Here we wrap our app with <MySWRProvider /> */}
        <MySWRProvider>
          <Navbar />
          <br />
          {children}
        </MySWRProvider>
      </body>
    </html>
  )
}

型

赞(0）回复(0）举报 2023-08-04

我来回答

next.js SWR全局配置

1条答案

相关问题

热门标签

最新问答