timmy
timmy
PostsComments
NNuxt
Created by timmy on 12/5/2024 in #❓・help
How can I share a custom data fetching composable between pages and components?
I have a composable for doing CRUD operations on data to my backend API. Something like: 
const useAlbums = () => {
  const {data, refresh, error, status} = useFetch("/api/albums", { key: "albums" })

  const createAlbum = (values) => {
    try {
      const { data } = $fetch("/api/albums/create/", {
        method: "POST",
        body: values
      });
      refresh()
    } catch {
        throw createError(...)
    }
  }

  return {
    data,
    createAlbum,
    // ...
  }
}
export default useAlbums;
const useAlbums = () => {
  const {data, refresh, error, status} = useFetch("/api/albums", { key: "albums" })

  const createAlbum = (values) => {
    try {
      const { data } = $fetch("/api/albums/create/", {
        method: "POST",
        body: values
      });
      refresh()
    } catch {
        throw createError(...)
    }
  }

  return {
    data,
    createAlbum,
    // ...
  }
}
export default useAlbums;
I can call this from my pages: 
<script setup lang="ts">
  const { data: albums, createAlbum } = useAlbums();

  const onFormSubmit = (values) => createAlbum(values)
</script>
<script setup lang="ts">
  const { data: albums, createAlbum } = useAlbums();

  const onFormSubmit = (values) => createAlbum(values)
</script>
This is a nice pattern, but if I use my composable in multiple pages/components it results in numerous calls to the API. I imagine this is expected behaviour: every time the composable is called, a new useFetch call is made etc. How can I make this composable (or data) "global" so that any page/component that loads the composable is accessing the same data, with out it having to re-fetch from the server (which only needs to happen on a) initial load and b) calling refresh) I imagine there are a number of possibilities: 1. Use Pinia 2. Make the composable global (not sure if possible) 3. Use some sort of caching with useFetch (not sure if possible) 4. Use useState (don't fully understand if this is a solution)
16 replies