migrate-from-v5-to-v6

Svelte v5는 Svelte v3/v4의 stores 구문과 레거시 호환성을 제공하지만, 이 어댑터에서는 다소 버그가 많고 신뢰성이 떨어졌습니다. @tanstack/svelte-query v6 어댑터는 signals에 의존하는 runes 구문으로 완전히 마이그레이션합니다. 또한 이 재작성으로 쿼리 입력이 반응성을 유지하도록 보장하는 데 필요한 코드가 간소화될 것입니다.

설치

프로젝트에 Svelte v5.25.0 이상이 있는지 확인하세요.

pnpm add @tanstack/svelte-query@latest(또는 사용하는 패키지 관리자의 동등한 명령)을 실행합니다.

@tanstack/svelte-query v6는 @tanstack/query-core v5에 의존한다는 점에 유의하세요.

함수 입력

Angular 및 Solid 어댑터와 마찬가지로 이제 Svelte 어댑터의 대부분 함수는 반응성을 제공하기 위해 옵션을 "thunk"(() => options)로 제공해야 합니다. 여기서는 TypeScript가 도움이 되며, 이 표기법이 누락되면 경고합니다.

- const query = createQuery({  // [!code --]
+ const query = createQuery(() => ({ // [!code ++]
    queryKey: ['todos'],
    queryFn: () => fetchTodos(),
- }) // [!code --]
+ })) // [!code ++]

속성 접근

어댑터가 더 이상 저장소를 사용하지 않으므로 이제 $ 접두사를 붙일 필요가 없습니다.

- {#if $todos.isSuccess} // [!code --]
+ {#if todos.isSuccess} // [!code ++]
    <ul>
-     {#each $todos.data.items as item} // [!code --]
+     {#each todos.data.items as item} // [!code ++]
        <li>{item}</li>
      {/each}
    </ul>
  {/if}

반응성

이전에는 입력값에 반응성을 부여하려면 저장소를 다소 복잡하게 다뤄야 했습니다. 이제는 그렇지 않습니다! 쿼리를 $derived로 감쌀 필요조차 없습니다.

- const intervalMs = writable(1000) // [!code --]
+ let intervalMs = $state(1000) // [!code ++]

- const query = createQuery(derived(intervalMs, ($intervalMs) => ({ // [!code --]
+ const query = createQuery(() => ({ // [!code ++]
    queryKey: ['refetch'],
    queryFn: async () => await fetch('/api/data').then((r) => r.json()),
-   refetchInterval: $intervalMs, // [!code --]
+   refetchInterval: intervalMs, // [!code ++]
- }))) // [!code --]
+ })) // [!code ++]

레거시 모드 비활성화

컴포넌트에 스토어가 있으면 runes 모드로 올바르게 전환되지 않을 수 있습니다. 다음 두 가지 방법으로 애플리케이션이 runes를 사용하도록 보장할 수 있습니다:

파일별로

각 .svelte 파일에서 runes로 마이그레이션한 후 <svelte:options runes={true} />를 추가하세요. 점진적 마이그레이션이 필요한 대규모 애플리케이션에 더 적합합니다.

프로젝트 전체 범위에서

svelte.config.js에서 config에 다음을 추가합니다:

  compilerOptions: {
    runes: true,
  },

앱에서 stores 구문을 100% 제거한 후에 이를 추가할 수 있습니다.