React（TanStack）Query 基础用法（React Native、Expo）

npx expo install @tanstack/react-query
npm i -D @tanstack/eslint-plugin-query

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 앱 컴포넌트들 */}
    </QueryClientProvider>
  );
}

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { FlatList, Text, View } from 'react-native';
 
const fetchUsers = async () => { // 정보를 fetch하는 함수
  const res = await axios.get('https://jsonplaceholder.typicode.com/users');
  return res.data;
};
 
export default function UserList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['users'], // 쿼리의 고유 식별자
    queryFn: fetchUsers, // 정보를 fetch하는 함수
  });
 
  if (isLoading) return <Text>불러오는 중...</Text>;
 
  if (isError) return <Text>오류 발생: {(error as Error).message}</Text>;
 
    return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

import { useEffect } from 'react';
import { AppState, Platform } from 'react-native';
import { focusManager } from '@tanstack/react-query';
function onAppStateChange(status) {
  if (Platform.OS !== 'web') {
    focusManager.setFocused(status === 'active');
  }
}
useEffect(() => {
  const subscription = AppState.addEventListener('change', onAppStateChange);
  return () => subscription.remove();
}, []);

import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';
 
export function useRefreshOnFocus(refetch) {
  useFocusEffect(
    useCallback(() => {
      refetch();
    }, [])
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';
 
const createPost = async (newPost) => {
  const res = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return res.data;
};
 
export function NewPostButton() {
  const queryClient = useQueryClient(); // 쿼리 클라이언트 인스턴스
  const mutation = useMutation({
    mutationFn: createPost, // 뮤테이션 함수
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['posts'] }); // 쿼리 데이터 무효화
    },
  });
  return (
    <Button
      title="새 글 작성"
      onPress={() => mutation.mutate({ title: '제목', body: '내용' })} // 뮤테이션 실행
    />
  );
}

npx expo install @dev-plugins/react-query

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useReactQueryDevTools } from '@dev-plugins/react-query';
 
const queryClient = new QueryClient({});
 
export default function App() {
  useReactQueryDevTools(queryClient); // 디버깅 도구 초기화
 
  return (
    <QueryClientProvider client={queryClient}>
      {/* ... */}
    </QueryClientProvider>
  );
}