Next.js + React-Query (12버전)

1. Next.js(version:12)

React-Query SSR 사용 세팅

export default function App({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
  <>
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
        <ReactQueryDevtools/>
     
      </Hydrate>
    </QueryClientProvider>
  </>
  )
}

2. React-Query

1) Api Function

const axiosData = async () => {
  try {
    const { data } = await axios.get(API);
   
    return data
  } catch (err) {
    console.error(err);
  }
}

2) getServerSideProps

export const getServerSideProps = async () => {
  const queryClient = new QueryClient()
	
	await queryClient.prefetchQuery('posts', axiosData)

	return {
		props: {
			dehydratedState: dehydrate(queryClient),
		},
	}
};