개요

@tanstack/svelte-query 패키지는 Svelte를 통해 TanStack Query를 사용하기 위한 일급 API를 제공합니다.

store에서 runes 구문으로 마이그레이션하시나요? 마이그레이션 가이드를 참조합니다.

예시

프로젝트 루트 근처에 QueryClientProvider를 포함합니다:

<script lang="ts">
  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
  import Example from './lib/Example.svelte'

  const queryClient = new QueryClient()
</script>

<QueryClientProvider client={queryClient}>
  <Example />
</QueryClientProvider>

그런 다음 아무 컴포넌트에서나 임의의 함수(예: createQuery)를 호출합니다:

<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query'

  const query = createQuery(() => ({
    queryKey: ['todos'],
    queryFn: () => fetchTodos(),
  }))
</script>

<div>
  {#if query.isPending}
    <p>Loading...</p>
  {:else if query.isError}
    <p>Error: {query.error.message}</p>
  {:else if query.isSuccess}
    {#each query.data as todo}
      <p>{todo.title}</p>
    {/each}
  {/if}
</div>

SvelteKit

SvelteKit을 사용하고 있다면 SSR 및 SvelteKit을 살펴보세요.

사용 가능한 함수

Svelte Query는 Svelte 앱에서 서버 상태를 더 쉽게 관리할 수 있도록 유용한 함수와 컴포넌트를 제공합니다.

• createQuery
• createQueries
• createInfiniteQuery
• createMutation
• useQueryClient
• useIsFetching
• useIsMutating
• useMutationState
• useIsRestoring
• useHydrate
• <QueryClientProvider>
• <HydrationBoundary>

Svelte Query와 React Query의 중요한 차이점

Svelte Query는 React Query와 유사한 API를 제공하지만, 유의해야 할 몇 가지 핵심 차이점이 있습니다.

• 반응성을 유지하려면 create* 함수의 인수를 함수로 감싸야 합니다.