Weird duplication of request Apollo/Next.JS
Unanswered
Madeiran sardinella posted this in #help-forum
Madeiran sardinellaOP
Hey, I have some weird problem with requests, on my page.tsx (homepage) have 3 request (content request, header and footer request and metadata - this is the same what was for content, but it's Next.JS method), but I have something like this in my console (when I am checking queries that are made by apollo, while loading page):
â—‹ Compiling / ...
✓ Compiled / in 1744ms (1012 modules)
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
✓ Compiled /manifest.webmanifest in 166ms (730 modules)
✓ Compiled /icon3.png in 374ms (732 modules)
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
Do you have an idea, why there are so many requests?
â—‹ Compiling / ...
✓ Compiled / in 1744ms (1012 modules)
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
✓ Compiled /manifest.webmanifest in 166ms (730 modules)
✓ Compiled /icon3.png in 374ms (732 modules)
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
query { pageSlug: '/' }
query { headerLocation: 'PRIMARY', footerLocation: 'FOOTER' }
Do you have an idea, why there are so many requests?
5 Replies
Did you setup a cache?
In this article I explain how to init an Apollo client safely in RSCs: https://prismic.io/blog/advanced-nextjs-server-context
Andy Ingram Apollo graphql demo with RSC: https://github.com/AndrewIngram/next-rick-morty
Madeiran sardinellaOP
Yes, I have used cache() method in all request functions and I am using app router
Madeiran sardinellaOP
so cache() is used in page.tsx, and for apollo-client I've used: InMemoryCache as cache option in new ApolloClient()