useQuery in combination with a Pinia store and store data (Nuxt)

[youri-spendcloud]

I have a user store, which holds id, name etc of the current user.

interface UserStore {
  id: number | null
  name: string | null
  email: string | null
  firstName: string | null
  lastName: string | null
}

export const useUserStore = defineStore('user', () => {
  const state = reactive<UserStore>({
    id: null,
    name: null,
    email: null,
    firstName: null,
    lastName: null,
  })

  function setUser(id: number, name: string, email: string, firstName: string, lastName: string) {
    state.id = id
    state.name = name
    state.email = email
    state.firstName = firstName
    state.lastName = lastName
  }

  const fullName = computed(() => `${state.firstName} ${state.lastName}`)

  return {
    setUser,
    fullName,
    ...toRefs(state),
  }
})

And a query:

export const useUser = defineQuery(() => {
  const requestFetch = useRequestFetch()

  const { state, ...rest } = useQuery({
    key: () => ['user'],
    query: () =>
      requestFetch('/api/user'),
  })

  return {
    ...rest,
    user: state,
  }
})

So when I run the query at some place

const { state } = useUser()

console.log(state.data) // should give me the current user from the backend

But what is the right place to update the user in the store, with the user from the query.

Or should I just call the useUser query again where I need them?

[posva]

I would call useUser() where you need to. Since it's a query, it can be invalidated when logging out and it can be awaited when needed with the refresh() method since it dedupes requests.

[youri-spendcloud]

Thanks for your answer.

Another question then (sorry), how can I access the useUser query inside an mutation, is using getQueryData from useQueryCache correct?

[posva]

yes, interact directly with the cache from a mutation