Vue3 Pinia action is not being called

Viewed 68

I am trying to setup a store using Pinia in vue3 with apollo client and composition API.

here is my store

import { defineStore } from "pinia";
import apolloClient from "../apollo.provider";
import { ALL_POSTS } from '@/constants/blog'

export const usePostsStore = defineStore("posts", {
  state: () => ({
    posts: []
  }),

  actions: {
    async AllPosts() {
      const { data } = await apolloClient.query({
        query: ALL_POSTS,
        fetchPolicy: 'no-cache'
      })
      console.log(data)
      this.posts = data.posts.data
    },
  },

})

and here is the response

{
  "data": {
    "posts": {
      "data": [
        {
          "id": 2
        },
        {
          "id": 3
        },
        {
          "id": 5
        },
        {
          "id": 4
        },
        {
          "id": 1
        }
      ]
    }
  }
}

I get an empty array with this setup. Please help me understand how to get the posts!

0 Answers
Related