react-query

https://scrapbox.io/files/63b8e43d99ef89001dc0c588.png

react-queryとは

axios や fetchの非同期通信まわりを楽にできる（hooksでAPIがたたけて、data, isLoadingの変数で受け取れる）

キャッシュをよしなにしてくれまっせ

まず

code:_app.tsx

const queryClient = new QueryClient({

defaultOptions: {

queries: {

retry: false,

refetchOnWindowFocus: false,

},

},

});

function App({ Component, pageProps }: AppProps) {

const router = useRouter();

return (

<QueryClientProvider client={queryClient}>

<ReactQueryDevtools initialIsOpen={false} />

<Layout>

<Component {...pageProps} />

</Layout>

</QueryClientProvider>

);

}

export default App;

🔍