오늘의 개발 23.08.05 - SWR / GROQ

SWR / GROQ 를 활용 sanity에 저장한 데이터 불러오기

SWR - https://swr.vercel.app/ko/docs/getting-started , https://swr.vercel.app/docs/global-configuration

SWR을 global configuration으로 활용하기 위해서 layout.tsx 파일에 children 감싸주기

import { SWRConfig } from "swr";

	<SWRConfig
      value={{
        fetcher: (url: string) => fetch(url).then((res) => res.json()),
      }}
    >
      {children}
    </SWRConfig>

fetch 뿐만아니라 axios와 같은 라이브러리도 사용 가능
fetcher를 글로벌하게 적용시켰기때문에 useSWR를 import해서 url만 작성해주시면 바로 적용가능

예시로 api/test 폴더로 서버를 구축하고 'hello'를 response로 return 한다고 가정하고 SWR 사용

app/api/test/route.ts 생성

import { NextResponse } from "next/server";
export async function GET(req: Request) {
  return NextResponse.json("hello");
}

NextResponse - https://nextjs.org/docs/app/api-reference/functions/next-response

데이터를 받아올 클라이언트 페이지 생성

'use client'
import useSWR from "swr";
const TestPage = () => {
  const { data, error, isLoading } = useSWR(`/api/test`);
  console.log(data);  // hello 출력 
  return <div>TEST</div>;
};

export default TestPage;

SWR 사용준비가 끝났으니 GROQ 쿼리를 통해 sanity에 저장된 데이터를 불러오기를 시도

sanity client를 생성

import { createClient } from "@sanity/client";
export const client = createClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: process.env.SANITY_DATESET,
  useCdn: false,
  apiVersion: "2023-08-05",
  token: process.env.SANITY_SECRET_TOKEN,
});

api/test/route.ts에서 데이터 불러오기

import { NextResponse } from "next/server";
import { client } from "@/service/sanity";

export async function GET(req: Request) {
  const data = client.fetch(`*[_type == 'book' && id == "10"]`)
  
  return NextResponse.json(data);
}

sanity document 이름이 book이면서 id가 10인 데이터를 가져옴

GROQ 쿼리 - https://www.sanity.io/docs/query-cheat-sheet
쿼리 사용법 자체는 어렵지 않으니 한번 공식문서를 살펴보는걸 추천