How to prevent duplicate API endpoint calls being made from within a component?
In a summary, these are the related factors:
- Page containing component and uses default layout,
- Component within page uses pinia store to fetch data via useAsyncData
- Pina store loaded in the component and retrieves data via a custom fetch
- Plugin adds a custom fetch and used in the pinia store
- Default layout that has the page content if not loading, or loading spinner if loading (loading is determined from loading pinia store)
- loading store that triggers a loading spinner in the layout
When the component fetches the data via useAsyncData, the call repeats itself. Even if i use a key, it is still repeating itself. It does successfully fetch the data, however it is always fetching it twice. I believe this could be due to the loading spinner on the layout page which causes a re-render. It is preferred that the data is loaded on the client side, so a loading spinner was implemented.
Is this a good approach? Is there a better approach? Possible examples somewhere I can learn from? How can I prevent duplicate calls from being made, and preferably not a hack, but setting this all up the right way. Thank you.
- Page containing component and uses default layout,
- Component within page uses pinia store to fetch data via useAsyncData
- Pina store loaded in the component and retrieves data via a custom fetch
- Plugin adds a custom fetch and used in the pinia store
- Default layout that has the page content if not loading, or loading spinner if loading (loading is determined from loading pinia store)
- loading store that triggers a loading spinner in the layout
When the component fetches the data via useAsyncData, the call repeats itself. Even if i use a key, it is still repeating itself. It does successfully fetch the data, however it is always fetching it twice. I believe this could be due to the loading spinner on the layout page which causes a re-render. It is preferred that the data is loaded on the client side, so a loading spinner was implemented.
Is this a good approach? Is there a better approach? Possible examples somewhere I can learn from? How can I prevent duplicate calls from being made, and preferably not a hack, but setting this all up the right way. Thank you.
