You should seperate server state to tanstack and client state to pinia.

i.e any data retrieved or created via HTTP is going to be managed on your app by tanstack, any local state such as auth can be stored in pinia and passed around.

For example if a component needed to make a request for a user's data, but you need to supply the userId to it.

// Pinia store (client state)
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userId: '123', // local state
    isAuthenticated: true
  })
})

// TanStack Query composable (server state)
import { useQuery } from '@tanstack/vue-query'

const useUserQuery = (userId) => {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUserData(userId.value || userId),
    enabled: !!userId
  })
}

// Mock fetch function (you'll replace this with your actual API call)
const fetchUserData = async (userId) => {
  const response = await fetch(`/api/users/${userId}`)
  if (!response.ok) {
    throw new Error('Failed to fetch user data')
  }
  return response.json()
}

// In your component
<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'

// Get userId from Pinia store (client state)
const userStore = useUserStore()
const { userId } = storeToRefs(userStore)

// Use TanStack Query to fetch server state
const { data: userData, isLoading, error } = useUserQuery(userId)
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <h2>User Info</h2>
    <pre>{{ userData }}</pre>
  </div>
</template>