[Tanstack-Qeury / json-server] json-server에서 내림차순으로 정렬해 get 응답 받기

json-server를 이용해 프로젝트에 등록된 게시글들의 정보를 관리하기위해 tanstack query를 사용했다.

json-server 자체에서 기준을 지정해 내림차순/오름차순으로 정렬한 값을 받을 수 있다는 것도 처음 알았고 tanstack query를 사용할 때마다 사용법이 약간 헷갈려서 간단한 부분부터 조금씩 정리해두고 봐야겠당

 

postsRequest.js

import axios from 'axios';

const API_URL = 'http://localhost:4000/posts';

export const getPosts = async () => {
  try {
    const response = await axios.get(API_URL);
    return response.data;
  } catch (error) {
    return error.response.data;
  }
};

export const getPostsByDate = async () => {
  try {
    const response = await axios.get(`${API_URL}?_sort=-created_at`);
    return response.data;
  } catch (error) {
    return error.response.data;
  }
};

export const getPostsByLikes = async () => {
  try {
    const response = await axios.get(`${API_URL}?_sort=-likes`);
    return response.data;
  } catch (error) {
    return error.response.data;
  }
};

- axios를 사용해 실제로 API에 요청을 보내는 메서드들이 있는 파일

- API 주소는 실수를 피하기 위해 상수로 저장해두고 사용했고, 정렬 기준은 쿼리스트링으로 전달한다.

- ?_sort= 후에 정렬기준이 될 key를 알려주고 내림차순의 경우 key 앞에 -를 붙여준다 (오름차순일 경우 아무것도 붙이지 않음)

 

 

postQuery.js

import { useQuery } from '@tanstack/react-query';
import { getPosts, getPostsByDate, getPostsByLikes } from '../api/postRequest.js';

export const useGetPosts = () => {
  const { data, isPending, isError, isSuccess } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  });

  return { data, isPending, isError, isSuccess };
};

export const useGetPostsByDate = () => {
  const { data, isPending, isError, isSuccess } = useQuery({
    queryKey: ['postsByDate'],
    queryFn: getPostsByDate,
  });

  return { data, isPending, isError, isSuccess };
};

export const useGetPostsByLikes = () => {
  const { data, isPending, isError, isSuccess } = useQuery({
    queryKey: ['postsByLikes'],
    queryFn: getPostsByLikes,
  });

  return { data, isPending, isError, isSuccess };
};

- 위의 요청들을 활용해 서버상태를 관리할 query들을 모아둔 파일

- 현재는 useQuery를 활용한 get 요청만 있는 상태

 

 

컴포넌트에서의 사용

const { data: posts, isSuccess, isError } = useGetPostsByLikes();

- 위와같이 컴포넌트에서 사용할 수 있다!

- 식별자가 겹치는 경우 다른 이름을 지정해준다.