How to get reactive State on initial page load when using Fetch inside a Pinia Store

[markteekman]

Hi all,

I'm trying to separate my business logic in a store (posts.js, using the Composition API method) which contains a state posts and a function getPosts with a fetch request:

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const usePostsStore = defineStore('posts', () => {
  const posts = ref([])

  function getPosts() {
    fetch('https://mywebsite.com/wp-json/wp/v2/posts')
      .then(response => response.json())
      .then(data => {
        posts.value = data
        console.log('Data is fetched.')
      })
      .catch((error) => {
        console.log(error)
      })
  }

  return {
    posts,
    getPosts
  }
})

I then use this store inside a component where I want to show the posts fetched from the API like so:

<template>
  <ul>
      <li
        v-for="post in posts"
        :key="post.id"
      >
        <p>{{ post.title.rendered }}</p>
      </li>
    </ul>
</template>

<script setup>
import { ref } from 'vue'
import { usePostsStore } from '~/stores/posts'

const store = usePostsStore()
const posts = ref(store.posts)

store.getPosts()

console.log(posts)
</script>

I expected the posts to be shown on page load. The console.log('Data is fetched.') from the getPosts() function is logged to the console, and the console.log(posts) inside the component indeed shows that there is data. But the data is only shown on the page when something Hot Module Reloads (so changing the template inside the component for example) or when I switch to another route and come back to this one. How can I get the data to be shown directly on page load? It does work when I fetch the data inside the component itself like this:

<script setup>
import { ref } from 'vue'

const posts = ref(null)

fetch('https://mywebsite.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    posts.value = data
    console.log('Data is fetched.')
  })
  .catch((error) => {
    console.log(error)
  })
</script>

But I would like to separate this logic in a Pinia store of course 🙂 Thanks in advance!

[vanillajonathan]

I got this to work by structuring the store with an object containing state and actions and setting this.posts.

export const usePostsStore = defineStore('settings', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async getPosts() {
      const result = await fetch('https://mywebsite.com/wp-json/wp/v2/posts');
      const data = await result.json();
      this.posts = data;
    },
  },
})

[mpont91]

Is it possible to call getPosts action at the initialization of the store?
I mean when you will use this store you will do something like:

import {usePostsStore} from 'store'
const postsStore = usePostsStore()
postsStore.getPosts()

// use postsStore.posts ...

I want to avoid the line postsStore.getPosts()
I tried something like:

export const usePostsStore = defineStore('settings', {
  state: () => ({
    posts: this.getPosts(),
  }),
  actions: {
    async getPosts() {
      const result = await fetch('https://mywebsite.com/wp-json/wp/v2/posts');
      const data = await result.json();
      this.posts = data;
    },
  },
})

But it doesn't work 😅

[vanillajonathan]

I don't know. Not that I am aware of, but I just got started with Pinia.

[markteekman]

I got this to work by structuring the store with an object containing state and actions and setting this.posts.

export const usePostsStore = defineStore('settings', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async getPosts() {
      const result = await fetch('https://mywebsite.com/wp-json/wp/v2/posts');
      const data = await result.json();
      this.posts = data;
    },
  },
})

Thanks @vanillajonathan, this indeed does the trick! I'll stick with that syntax instead of the Composition API version 🙂

[markteekman]

@mpont91 that's a good one, I'm also pretty new on Pinia so I wouldn't know why it doesn't work though 🤔 Would be interesting to see how it can be done.

[tesfamariam1]

I got this to work by structuring the store with an object containing state and actions and setting this.posts.

export const usePostsStore = defineStore('settings', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async getPosts() {
      const result = await fetch('https://mywebsite.com/wp-json/wp/v2/posts');
      const data = await result.json();
      this.posts = data;
    },
  },
})

Thans @vanillajonathan, this indeed does the trick! I'll stick with that syntax instead of the Composition API version 🙂

this is working for me too, thanks for sharing

[santosh898]

@markteekman You have access to full composition api in the store definition function.

export const usePostsStore = defineStore('posts', () => {
  const posts = ref([])

  function getPosts() {
    fetch('https://mywebsite.com/wp-json/wp/v2/posts')
      .then(response => response.json())
      .then(data => {
        posts.value = data
        console.log('Data is fetched.')
      })
      .catch((error) => {
        console.log(error)
      })
  }

  // Runs the very first time the store is used. i.e., when the store is initialized.
  getPosts()

  return {
    posts,
    getPosts
  }
})

[markteekman]

Thanks @santosh898, that works as expected! @vanillajonathan I'll mark this one as the answer because this one uses the Composition API syntax I was looking for, yours is still valid for the alternative approach though so this post should help people either way 😄

[Clive-Ward-Cron]

In case anyone runs into a similar issue.

I'm using Nuxt 3 and tried the approach in the selected answer but instead used async / await with my store and ran into some issues. I tried useFetch provided by Nuxt and it kept getting stuck in pending.

To get past this I had to make another await call to execute() before the data would resolve.

export const useEnrollmentStore = defineStore('enrollment', () => {

  // Plan Selection Data
  const products = ref([])
  const tier = ref(1)
  
  // SETTERS
  const setters = {
    setTier: (newTier: number) => {
      tier.value = newTier
    },
  }

  // ACTIONS
  async function fetchProducts() {
    if (process.dev) {
      console.log('FETCHING PRODUCTS')
    }
    const {data, execute} = await useFetch('/api/products', {method: "POST"})
    await execute() // Need to manually call execute for some reason in this context
    const { data: p } = data.value
    products.value = p
  }

  onMounted(async () => {
    await fetchProducts()
  })
  
  return { products, tier, ...setters }
})

[tafadzwagonera]

@Clive-Ward-Cron Please, try the sample code below. It should resolve the useFetch pending issue and you won't have to await execute which looks weird.

export const ... = defineStore('...', () => {

  // State and getters...

  async function fetchProducts() {
    const { data, error } = await useFetch('/api/products', { method: "POST" })

    // ... Handle error.

    if (data.value)
      products.value = data.value
  }

  ;(async () => {
    await fetchProducts()
  })()

  return { products, ... }
})