N
Nuxt•3mo ago
johngnehc

How to have authenticated queries using Tanstack and Cookies

Hello! I am starting with Nuxt3 and tanstack query. I have a simple backend that sets the authorization in a cookie. On the Nuxt part, I wanted to have something like their example that leverage prefetching on the server (https://tanstack.com/query/latest/docs/framework/vue/examples/nuxt3?path=examples%2Fvue%2Fnuxt3%2Fapp.vue) However, it seems the cookies are not passed to the request. In the fetcher, I tried using $fetch , useFetch and also to construct the Cookie by getting them with useCookie. It works fine if I don't use prefetching and do the fetching on the client but wanted to explore having the data loaded on the server. Has anyone implemented something similar and point me out how to pass cookies in this case?
Vue TanStack Query Nuxt3 Example | TanStack Query Docs
An example showing how to implement Nuxt3 in Vue using TanStack Query.
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @johngnehc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To have authenticated queries with TanStack Query in Nuxt 3, where your backend sets the authorization in a cookie, you need to ensure that cookies are forwarded during server-side data fetching (prefetching). By default, when using $fetch or useFetch on the server, cookies are not automatically included in internal API calls due to security reasons. However, Nuxt provides a solution for this. Key points: - When you use useFetch with a relative URL on the server, Nuxt will automatically use useRequestFetch under the hood, which proxies headers and cookies from the incoming request to your internal API calls. This is essential for SSR prefetching with authentication cookies. - If you use $fetch directly, cookies are not forwarded unless you manually pass them. - For external APIs, you must manually forward the cookies using useRequestHeaders(['cookie']) and include them in your fetcher's headers. How to implement: 1. For internal API calls (e.g., /api/your-endpoint): Use useFetch in your fetcher. Nuxt will handle cookie forwarding for you during SSR: 
   // composables/useMyQuery.ts
   export function useMyQuery() {
     return useFetch('/api/your-endpoint')
   }
   
   // composables/useMyQuery.ts
   export function useMyQuery() {
     return useFetch('/api/your-endpoint')
   }
This works with TanStack Query's prefetching if you use useFetch in your query function, as Nuxt will forward cookies during SSR prefetching Passing Headers and Cookies. 2. For external API calls: You need to manually forward the cookies: 
   import { useRequestHeaders } from '#app'

   export async function fetchWithAuth(url) {
     const headers = useRequestHeaders(['cookie'])
     return await $fetch(url, { headers })
   }
   
   import { useRequestHeaders } from '#app'

   export async function fetchWithAuth(url) {
     const headers = useRequestHeaders(['cookie'])
     return await $fetch(url, { headers })
   }
Use this fetcher in your TanStack Query setup. 3. If you use $fetch for internal APIs and want to forward cookies: Use useRequestFetch instead of $fetch: 
   const requestFetch = useRequestFetch()
   await requestFetch('/api/your-endpoint')
   
   const requestFetch = useRequestFetch()
   await requestFetch('/api/your-endpoint')
This ensures cookies are forwarded during SSR useRequestFetch. Summary:
For authenticated SSR queries with TanStack Query in Nuxt 3, use useFetch (for internal APIs) or useRequestFetch/$fetch with manually forwarded cookies (for external APIs) in your query function. This will ensure cookies are sent with your requests during server-side prefetching, enabling authentication to work as expected. If you follow the TanStack Query Nuxt example and use useFetch in your query function, cookies should be forwarded automatically for internal API calls during SSR. If you still encounter issues, double-check that your API endpoint is relative (not absolute) and that you are not using $fetch directly without forwarding headers. For more details, see the official Nuxt docs on Passing Headers and Cookies and useRequestFetch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@632291656229584907> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?