vike-vue-query

Integrates TanStack Query into your vike-vue SSR app.

Features:

• Data is fetched at the component level (unlike +data, which fetches at the page level)
• All TanStack Query niceties
• All SSR benefits

You can completely stop using Vike's +data hook — or use both: +data for some pages, and vike-vue-query for others.

[!NOTE] If you don't use SSR (i.e. SPA/SSG with pre-rendering), then you don't need vike-vue-query — you can use TanStack Query without any Vike integration.

Table of Contents

Installation
Basic usage
Example
Settings
Version history
See also

Installation

1. npm install vike-vue-query @tanstack/vue-query
2. Extend +config.js:

   // pages/+config.js
   
   import vikeVue from 'vike-vue/config'
   import vikeVueQuery from 'vike-vue-query/config'
   
   export default {
     // ...
     extends: [vikeVue, vikeVueQuery]
   }

[!NOTE] The vike-vue-query extension requires vike-vue.

Basic usage

<template>
  <h1>Star Wars Movies</h1>
  <ol>
    <template v-if="isPending">
      <li>Loading...</li>
    </template>
    <template v-else-if="isError">
      <li>Error: {{ error }}</li>
    </template>
    <template v-else>
      <li v-for="item in data!" :key="item.id">
        {{ item.title }} ({{ item.release_date }})
      </li>
    </template>
  </ol>
</template>

<script setup>
import { onServerPrefetch } from 'vue'
import { useQuery } from '@tanstack/vue-query'

const { isError, isPending, isFetching, data, error, suspense } = useQuery({
  queryKey: ['movies'],
  queryFn: fetchMovies,
  staleTime: 1000 * 60 * 5,
  select: (data) => minimize(data),
})

// This will be called on the server to prefetch the data
onServerPrefetch(suspense)

async function fetchMovies() {
  const response = await fetch('https://brillout.github.io/star-wars/api/films.json')
  const moviesData = (await response.json())
  return moviesData
}

function minimize(movies) {
  return movies.map((movie) => {
    const { title, release_date, id } = movie
    return { title, release_date, id }
  })
}
</script>

Example

See examples/vue-query/.

Settings

You can set TanStack Query client options:

// pages/+queryClientConfig.ts

export { queryClientConfig }

import type { QueryClientConfig } from '@tanstack/vue-query'

const queryClientConfig: QueryClientConfig = {
  defaultOptions: {
    queries: {
      // Retry failed requests once
      retry: 1,
      // Consider data stale after 2 minutes
      staleTime: 1000 * 60 * 2,
      // Don't refetch when window loses or gains focus during development
      refetchOnWindowFocus: import.meta.env.PROD,
      // ... more options ...
    }
  }
}

For all available options, see TanStack Query > API reference > useQuery.

Version history

See CHANGELOG.md.

See also

• Vike Docs > TanStack Query