[Next.js] react query 적용 및 사용하기

Next.js란

리액트 프레임워크로 서버사이드 렌더링을 가능하게 하는 프레임워크입니다.
기존 리액트는 라우팅 등 개발에 필요한 수많은 라이브러리를 각각 추가해줘야 하는 번거로움이 있었는데
Next.js는 이러한 프론트엔드 개발에 필요한 다양한 기능을 내장 라이브러리로 제공합니다.
또한 추가적으로 서버 사이드 렌더링이 가능하여 SEO에 유리한 웹을 개발할 수 있습니다.

1. _app.js

// _app.js
import React from 'react';
import '../styles/globals.css'
import { wrapper } from "../store/store";
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'
import Layout from '../components/layout'
import { SessionProvider } from "next-auth/react"

function MyApp({ Component, pageProps: {session, ...pageProps}, }) {
  const [queryClient] = React.useState(() => new QueryClient())

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

export default wrapper.withRedux(MyApp)

2. pages/dailyword.js

// pages/dailyword.js
import WordCarousel from "../components/organism/carousel/wordCarousel";
import { dehydrate, QueryClient, useQuery } from "react-query";
import Link from 'next/link'
import { fetchDailyword } from "./api/fetchDailyword"

export default function DailyWord() {

  const { isLoading, error, data } = useQuery('dailyword',() =>
    fetchDailyword(),
    {
      keepPreviousData: true,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    }
  );
  console.log(data)


  return (
      <div>
        <h2>DailyWord</h2>
        <WordCarousel slideItems={data.results}></WordCarousel>
      </div>
  );
}

export async function getServerSideProps(context) {

  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(
    "dailyword", 
    async () => await fetchDailyword());

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

3. pages/api/fetchDailyword.js

// pages/api/fetchDailyword.js
import axios from "axios";

export const fetchDailyword = async () => {

  const API_KEY = "@@@@@@@@@";

  const { data } = await axios.get(
    `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
  );

    return data;
}