Pinia Colada

With @pinia/colada installed, the module adds cached query composables on top of the Directus SDK. Router data loaders are opt-in via experimental.dataLoaders.

Data loader: defineDirectusLoader()

Loaders run during navigation, so the data is ready on first paint with no await in setup and no loading flash on client-side navigation. 

// <script lang="ts"> (non-setup block, exported from the page)
export const usePostsLoader = defineDirectusLoader({
  key: ['playground', 'posts'],
  query: directus => directus.request(readItems('posts', { limit: 5 })),
  staleTime: 1000 * 60,
})

// <script setup lang="ts">
const { data: posts, isLoading } = usePostsLoader()

Live result: 

[
  {
    "id": "ba559a1e-5b0c-4932-ab97-b1ab4ca69955",
    "title": "Why Steampunk Rabbits Are The Future of Work",
    "slug": "why-steampunk-rabbits-are-the-future-of-work"
  },
  {
    "id": "ddf1003f-6b9a-460c-83fd-d985d6defbd6",
    "title": "How To Become A Very Productive Rabbit",
    "slug": "testing-one-two-three"
  },
  {
    "id": "f7845a69-edcb-4163-a2a9-fb82b64475c5",
    "title": "Rabbit Facts That Will Blow Your Mind me",
    "slug": "rabbit-facts-that-will-melt-your-mind"
  }
]

Cached queries: useDirectusItemsQuery() and friends

useDirectusItemsQuery(), useDirectusItemQuery() and useDirectusSingletonQuery() mirror the useAsyncData composables but share one cache entry per key across the whole app, with staleTime controlling refetches. 

const { data: globals, asyncStatus } = useDirectusSingletonQuery('globals', {
  staleTime: 1000 * 60 * 5,
})

Live result (idle): 

{
  "id": "ab89c489-faea-4310-8b59-7ddb3caf279a",
  "url": "https://www.yoururl.com",
  "title": "Your Site",
  "tagline": "The best site ever",
  "description": "We empower you to build the best site possible",
  "social_links": [
    {
      "service": "github",
      "url": "https://github.com/directus/directus"
    },
    {
      "service": "linkedin",
      "url": "https://www.linkedin.com/company/directus-io"
    },
    {
      "service": "youtube",
      "url": "https://www.youtube.com/c/DirectusVideos"
    },
    {
      "url": "https://directus.chat/",
      "service": "discord"
    },
    {
      "url": "https://x.com/directus",
      "service": "x"
    }
  ],
  "logo": "43ddd7b8-9b2f-4aa1-b63c-933b4ae81ca2",
  "favicon": "2b4a0ba0-52c7-4e10-b191-c803d8da6a36",
  "logo_dark_mode": "ae390ba1-fcff-4b99-a445-5f19257095d1",
  "accent_color": "#6644FF"
}