TIL

24. 07. 03 TIL

효ㄷi 2024. 7. 3. 22:14

next.js 에서 쿼리 세팅하기!

ㄹㅇ루 간단하다...

yarn add @tanstack/react-query

이렇게 설치하는 건 같고

 

// src>app>provider.tsx
"use client";

import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

function QueryProvider({ children }: React.PropsWithChildren) {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

export default QueryProvider;

provider.tsx 파일을 만들어서 저렇게 넣어준다.

 

그리고 layout.tsx에 가서

// src>app>layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import QueryProvider from "./provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Sparta Next App",
  description: "This is awesome Website",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <QueryProvider>
          {children}
        </QueryProvider>
      </body>
    </html>
  );
}

QueryProvider로 감싸준다.

 

그리고 원래 useEffect로 작성했던 코드를 useQuery로 바꿔주는데

그러면 useEffect, useState 모두 지워주면 된다.

 

쿼리도 간단하다.

 

const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    const getPokemons = async () => {
      const res = await fetch('');
      const data: Pokemon[] = await res.json();
      setPokemons(data);
    };
    getPokemons();

원래 useEffect, useState가 이렇게 쓰였다면

 

const getPokemons = async () => {
  const res = await fetch('');
  const data: Pokemon[] = await res.json();
  return data;
};

일단 이렇게 따로 빼준 다음에

 

const PokemonsItem = () => {
  const {
    data: pokemons,
    isLoading,
    error,
  } = useQuery<Pokemon[]>({
    queryKey: ['pokemons'],
    queryFn: getPokemons,
  });

  if (isLoading) {
    return <div>로딩중</div>;
  }

  if (error) {
    console.error('error');
    return <div>오류가 발생했습니다</div>;
  }

이렇게 쿼리를 써준다. 쿼리 키는 pokemons로 해서 그대로 밑에 뿌려주게 하고,

getPokemons를 그대로~ 또 가져와서 써주면 된다.

 

음하핫