[TIL] React Query 연습

React Query 연습하려고 더미 데이터 만들고, Supabase에 데이터 넣어놔ㅏ따

/// api.js

import { supabase } from "./supabase";

/**
 *
 * @param {number} page 현재 페이지. state로 관리하는 게 좋을 듯
 * @param {number} limit 한 페이지에 보여줄 아이템 수. 상수로 지정.
 * @returns
 */
export const getPagenatedUsers = async (page, limit) => {
  const { data, error } = await supabase
    .from("users")
    .select("*")
    .range(page * limit, page * limit + limit);
  return { data, error };
};

import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import "./App.css";
import { getPagenatedUsers } from "./api";

function App() {
  const [page, setPage] = useState(0);
  const LIMIT = 10;

  const {
    data: users,
    error,
    isPending,
  } = useQuery({
    queryKey: ["users", page],
    queryFn: () => getPagenatedUsers(page, LIMIT),
  });

  console.log(users?.data, error, isPending);
  if (isPending) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return (
    <div>
      {users.data.map((user) => (
        <div key={user.id}>
          {user.name}-{user.gender}-{user.age}
        </div>
      ))}
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <button onClick={() => setPage((prev) => prev - 1)}>이전 페이지</button>
        <button onClick={() => setPage((prev) => prev + 1)}>다음 페이지</button>
      </div>
    </div>
  );
}

export default App;