Nuxt•3w ago

Nuxt Apollo useAsyncQuery not executing on render

Building a Nuxt3 app with Strapi and Nuxt Apollo, GraphQL endpoint is working. My front and backend is in docker and can communicate and as far as i could understand the GraphQL query was working recently but now it is not fetching data from my endpoint until i manually refetch data in dev console using Payload view. The app is using SSR, is this some kind of hydration problem ? The query is a simple "gql" string and is working in Apollo playground. The data comes in when i manually refresh it but not on page load/refresh

4 Replies

kapa.ai•3w ago

Hi @grelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that you're experiencing an issue with data fetching in your Nuxt 3 application using Apollo and GraphQL. This could indeed be related to hydration or how the asynchronous data fetching is being handled. Let's address this based on the available information: 1. Hydration and SSR: Nuxt 3 uses universal rendering by default, which means it renders on the server first and then hydrates on the client. If you're not seeing the data on initial page load, it could be related to how the data fetching is set up in relation to the hydration process. 2. Using useAsyncQuery: The useAsyncQuery composable is part of Nuxt Apollo, but it's important to note that it should be used at the top level of a component's setup function. If it's being called within an event handler or a method, this could cause issues. 3. Caching and Immediate Execution: By default, Nuxt's data fetching composables will execute immediately. However, if you've set any caching options or used lazy: true, this could affect when the data is fetched. To address this issue, you could try the following: 1. Ensure that your useAsyncQuery call is at the top level of your component's setup function. 2. Try using the useLazyFetch or useLazyAsyncData composables, which allow you to handle the loading state manually. This might help you better understand when the data is being fetched:

   <script setup>
   const { status, data: queryResult } = useLazyAsyncData('yourQueryKey', () => 
     useAsyncQuery(YOUR_QUERY)
   )
   </script>

   <template>
     <div v-if="status === 'pending'">Loading...</div>
     <div v-else-if="status === 'error'">Error fetching data</div>
     <div v-else>
       <!-- Display your data here -->
     </div>
   </template>

   <script setup>
   const { status, data: queryResult } = useLazyAsyncData('yourQueryKey', () => 
     useAsyncQuery(YOUR_QUERY)
   )
   </script>

   <template>
     <div v-if="status === 'pending'">Loading...</div>
     <div v-else-if="status === 'error'">Error fetching data</div>
     <div v-else>
       <!-- Display your data here -->
     </div>
   </template>

3. If the issue persists, you might want to try using $fetch instead of useAsyncQuery within an event handler or method, as suggested in the Nuxt documentation on data fetching. 4. Check your Nuxt configuration to ensure that SSR is enabled (ssr: true in your nuxt.config.ts). 5. Make sure that your GraphQL endpoint is accessible from both the server and the client side of your Nuxt application, especially since you're using Docker. If none of these solutions work, you might want to check if there are any specific issues with the Nuxt Apollo module you're using, as the knowledge sources don't provide detailed information about its current state or potential issues. Remember to always check the Nuxt and Apollo documentation for the most up-to-date information on best practices for data fetching in Nuxt 3 applications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1250772222285713530> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

grelleOP•3w ago

Seems related to this: https://github.com/vuejs/pinia/issues/2872 works when i remove nuxt/pinia

GitHub

Pinia throws obj.hasOwnProperty is not a function when combined wit...

Reproduction https://github.com/kyurkchyan/pinia-apollo-pnpm Steps to reproduce the bug Clone the repro repository install the dependencies using pnpm i run the project using pnpm dev observe that ...

grelleOP•3w ago

oh this was definitively a docker issue, there is 2 different endpoints between SSR and client side. How can i adress this ? Anyone have anhy advice on how to work in development with both server and frontend in docker and using Nuxt SSR which obiously will have to have the docker domain as SSR rendering endpoint and then localhost from client ? is it as easy as disabling SSR when developing or what would you say ? Guess browserHttpEndpoint is one way to go 😄

Gaming

Programming

Nuxt Apollo useAsyncQuery not executing on render

Did you find this page helpful?