SWR Global Configuration

이제 우리가 사용할 useSWR()를 전역적으로 사용하고 싶다. 훌륭한 기능이다.

//_app.tsx
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { theme } from "../styles/theme"
import { ThemeProvider } from "styled-components";
import { SWRConfig } from 'swr';//추가
import { createGlobalStyle } from "styled-components";

function MyApp({ Component, pageProps }: AppProps) {
  return (   
    <SWRConfig //추가
      value={{ fetcher:(url:string) => fetch(url).then((response) => response.json())}}>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Component {...pageProps} />
      </ThemeProvider>
    </SWRConfig>
  )
}

export default MyApp

<SWRConfig value={options}>
  <Component/>
</SWRConfig>

value={options} 값에는 fetcher를 사용할 것이다. 앞에서 사용한 fetcher를 가져 왔다. 이렇게 하면 SWR에 있는 모든 쿼리에 적용할 수 있게 된다.