react-query-kit을 사용하는 이유

29306 단어 beginnersreact

반응 쿼리 키트




If ur project that uses react-query and only focus on frontend. I would prefer u to use react-query-kit to make ur experience with react-query more simply and type-safe.



이점


  • 일관성을 고려하지 않고 queryKey를 관리합니다
  • .
  • react-query-kit으로 생성된 u를 통해 사용자 정의 후크를 더 안전한 유형으로 만듭니다
  • .
  • 가장 작은 크기(< 1kb)

  • Preview

    설치



    이 모듈은 npm과 번들로 제공되는 node을 통해 배포되며
    프로젝트dependencies 중 하나로 설치해야 합니다.

    npm install --save react-query-kit @tanstack/react-query
    


    createQuery



    용법




    import { QueryClient, dehydrate } from '@tanstack/react-query'
    import { createQuery } from 'react-query-kit'
    
    type Response = { title: string; content: string }
    type Variables = { id: number }
    
    const usePost = createQuery<Response, Variables, Error>({
      primaryKey: '/posts',
      queryFn: ({ queryKey: [primaryKey, variables] }) => {
        // primaryKey equals to '/posts'
        return fetch(`${primaryKey}/${variables.id}`).then(res => res.json())
      },
    })
    
    
    const variables = { id: 1 }
    
    // example
    export default function Page() {
      // queryKey equals to `['/posts', { id: 1 }]`
      const { data } = usePost({ variables, suspense: true })
    
      return (
        <div>
          <div>{data?.title}</div>
          <div>{data?.content}</div>
        </div>
      )
    }
    
    // nextjs example
    export async function getStaticProps() {
      const queryClient = new QueryClient()
    
      await queryClient.prefetchQuery(usePost.getKey(variables), usePost.queryFn)
    
      return {
        props: {
          dehydratedState: dehydrate(queryClient),
        },
      }
    }
    
    // usage outside of react component
    const data = await queryClient.fetchQuery(
      usePost.getKey(variables),
      usePost.queryFn
    )
    
    // useQueries example
    const queries = useQueries({
      queries: [
        { queryKey: usePost.getKey(variables), queryFn: usePost.queryFn },
        { queryKey: useProjects.getKey(), queryFn: useProjects.queryFn },
      ],
    })
    
    // setQueryData
    queryClient.setQueryData(usePost.getKey(variables), {...})
    
    // set data to all queries of `post`
    queryClient.setQueriesData([usePost.getKey()], {...})
    // or set data to some speicial queries of `post`
    queryClient.setQueriesData(usePost.getKey(variables), {...})
    
    // invalidate all queries of `post`
    queryClient.invalidateQueries(usePost.getKey())
    // or invalidate some speicial queries of `post`
    queryClient.invalidateQueries(usePost.getKey(variables))
    


    추가 API 참조



    옵션
  • primaryKey: string
  • 필수
  • primaryKeyqueryKey 배열의 첫 번째 요소가 됩니다.


  • 보고
  • getPrimaryKey: () => primaryKey
  • getKey: (variables: TVariables) => [primaryKey, variables]
  • queryFn: QueryFunction<TFnData, [primaryKey, TVariables]>

  • createInfiniteQuery



    용법




    import { QueryClient, dehydrate } from '@tanstack/react-query'
    import { createInfiniteQuery } from 'react-query-kit'
    
    type Data = { projects: { id: string; name: string }[]; nextCursor: number }
    type Variables = { active: boolean }
    
    const useProjects = createInfiniteQuery<Data, Variables, Error>({
      primaryKey: 'projects',
      queryFn: ({ queryKey: [_primaryKey, variables], pageParam = 1 }) => {
        return fetch(`/projects?cursor=${pageParam}?active=${variables.active}`).then(res => res.json())
      },
      getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    })
    
    const variables = { active: true }
    
    // example
    export default function Page() {
      // queryKey equals to `['projects', { active: true }]`
      const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
        useProjects({ suspense: true, variables })
    
      return (
        <div>
          {data.pages.map((group, i) => (
            <React.Fragment key={i}>
              {group.projects.map(project => (
                <p key={project.id}>{project.name}</p>
              ))}
            </React.Fragment>
          ))}
          <div>
            <button
              onClick={() => fetchNextPage()}
              disabled={!hasNextPage || isFetchingNextPage}
            >
              {isFetchingNextPage
                ? 'Loading more...'
                : hasNextPage
                ? 'Load More'
                : 'Nothing more to load'}
            </button>
          </div>
          <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
        </div>
      )
    }
    
    // nextjs example
    export async function getStaticProps() {
      const queryClient = new QueryClient()
    
      await queryClient.prefetchInfiniteQuery(
        useProjects.getKey(variables),
        useProjects.queryFn
      )
    
      return {
        props: {
          dehydratedState: dehydrate(queryClient),
        },
      }
    }
    
    // usage outside of react component
    const data = await queryClient.fetchInfiniteQuery(
      useProjects.getKey(variables),
      useProjects.queryFn
    )
    
    // setQueryData
    queryClient.setQueryData(useProjects.getKey(variables), {...})
    
    // set data of all queries of `projects`
    queryClient.setQueriesData(usePost.getKey({...}), {...})
    
    // invalidate all queries of `projects`
    queryClient.invalidateQueries(usePost.getKey({...}))
    


    추가 API 참조



    옵션
  • primaryKey: string
  • 필수
  • primaryKeyqueryKey 배열의 첫 번째 요소가 됩니다.


  • 보고
  • getPrimaryKey: () => primaryKey
  • getKey: (variables: TVariables) => [primaryKey, variables]
  • queryFn: QueryFunction<TFnData, [primaryKey, TVariables]>

  • createMutation



    용법




    import { createMutation } from 'react-query-kit'
    
    const useAddTodo = createMutation(
      async (data: { title: string; content: string }) =>
        fetch('/post', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
        }).then(res => res.json()),
      {
        onSuccess(data, variables, context) {
          // do somethings
        },
      }
    )
    
    function App() {
      const mutation = useAddTodo({  
        onSettled: (data, error, variables, context) => {
            // Error or success... doesn't matter!
        }
      })
    
      return (
        <div>
          {mutation.isLoading ? (
            'Adding todo...'
          ) : (
            <>
              {mutation.isError ? (
                <div>An error occurred: {mutation.error.message}</div>
              ) : null}
    
              {mutation.isSuccess ? <div>Todo added!</div> : null}
    
              <button
                onClick={() => {
                  mutation.mutate({  title: 'Do Laundry', content: "content..." })
                }}
              >
                Create Todo
              </button>
            </>
          )}
        </div>
      )
    }
    
    // usage outside of react component
    useAddTodo.mutationFn({  title: 'Do Laundry', content: "content..." })
    


    추가 API 참조



    보고
  • getKey: () => MutationKey
  • mutationFn: MutationFunction<TData, TVariables>
  • 좋은 웹페이지 즐겨찾기