defineColadaLoader()

내부적으로 @pinia/colada를 사용하는 로더입니다. 이 로더는 캐시, SSR 지원 등을 갖춘 비동기 상태 처리에 가장 효율적인 해법을 제공합니다.

이 로더에서 사용하는 key는 @pinia/colada의 useQuery()에 직접 전달되며 useMutation() 훅으로 무효화할 수 있습니다. 자세한 내용은 Pinia Colada의 query invalidation 문서를 참고하세요.

설정

@pinia/colada의 설치 지침을 따르세요.

예제

<script lang="ts">
import { defineColadaLoader } from 'vue-router/experimental/pinia-colada'
import { getUserById } from '../api'

export const useUserData = defineColadaLoader({
  async query(to, { signal }) {
    return getUserById(to.params.id, { signal })
  },
  key: to => ['users', to.params.id],
  // 같은 데이터를 너무 자주 가져오지 않도록 10초 동안 데이터를 "신선한" 상태로 유지합니다
  staleTime: 10000,
})
</script>

<script lang="ts" setup>
const route = useRoute('/users/[id]')

const {
  user,
  status,
  error
  isLoading,
  reload,
  refresh,
} = useUserData()
</script>

<template>
  <main>
    <h1>Pinia Colada Loader Example</h1>
    <pre>User: {{ route.params.id }}</pre>

    <fieldset>
      <legend>Controls</legend>

      <button @click="refresh()">Refresh</button>
      <button @click="reload()">Refetch</button>
    </fieldset>

    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 - 1 } }">
      Previous
    </RouterLink>
    |
    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 + 1 } }">
      Next
    </RouterLink>

    <h2>State</h2>

    <p>
      <code>status: {{ status }}</code>
      <br />
      <code>isLoading: {{ isLoading }}</code>
    </p>
    <pre v-if="error">Error: {{ error }}</pre>
    <pre v-else>{{ user == null ? String(user) : user }}</pre>
  </main>
</template>

TIP

query 함수에서 타입 지정된 라우트를 사용하려면 defineColadaLoader에 라우트 이름을 전달할 수 있습니다.

export const useUserData = defineColadaLoader('/users/[id]', {
  // ...
})

기본 새로고침 동작

불필요하게 자주 새로고침하는 일을 피하기 위해 Pinia Colada는 내비게이션 시 데이터를 refetch 하는 대신 refresh합니다. 데이터를 얼마나 자주 가져올지 제어하려면 staleTime 옵션을 변경하세요. 예를 들어 0으로 설정하면 라우트가 바뀔 때마다 데이터를 가져옵니다.

라우트 추적

query 함수는 to 매개변수에서 무엇이 사용되는지 추적하고, 추적된 속성이 바뀔 때만 데이터를 refresh합니다. 즉 query 함수에서 to.params.id를 사용하면 id 매개변수가 바뀔 때만 데이터를 refetch하며, to.query, to.hash, to.params.other 같은 다른 속성이 바뀌어도 refetch하지 않습니다. 데이터가 갱신되도록 하기 위해 이런 경우에도 refresh는 계속 수행됩니다. staleTime 옵션으로 데이터를 얼마나 자주 refresh할지 조정하세요.

SSR

SSR에 대해서는 Pinia Colada 문서를 따르세요.

Nuxt

@pinia/colada-nuxt 플러그인을 사용하면 별도 설정 없이 SSR이 동작합니다. Hydration은 추가 fetch를 트리거하지 않습니다!