-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Question - Is there support for @nuxtjs/apollo? #70
Comments
So, what you likely need is the However, I'm not entirely familiar with But assuming this is not easily possible, then a custom composable is the way to go. However, it can get tricky to get the types right, together with import { useAsyncData, type AsyncData } from '#app'
import { hash } from 'ohash'
export function useCachedQuery<TResult, TVariables extends OperationVariables>(
document: DocumentParameter<TResult, TVariables>,
variables?: VariablesParameter<TVariables>,
): AsyncData<TResult, unknown> {
// Create a unique key.
const key = hash(document, variables)
return useAsyncData(key, async function (app) {
// Try to get from cache.
const { value, addToCache } = await useDataCache<TResult>(
key,
app?.ssrContext?.event,
)
// If we have a value from cache, return it.
if (value) {
return value
}
// Make the GraphQL query.
const result = await useQueryImpl(document, variables)
// Add to cache.
await addToCache(result)
// Return the value.
return result
})
} If you also want to implement the options of |
Hello,
TLDR; how can I enable SSR caching with Apollo combined with NuxtHub?
First of all, I want to say that I’m relatively new to caching and I’m currently trying to optimize the performance of my website.
I’m using Strapi as a headless CMS and fetching content via @nuxtjs/apollo. The project is a webshop that operates in multiple languages and regions, which means a lot of dynamic content and API calls. I noticed the initial response time was realllllyyy slow, so I thought of caching some data on the server frontend as well..
I’ve started testing out NuxtHub, which looks like a great solution for easily storing cache and KV. However, I’m having trouble understanding how to properly cache the API data on the server side. The client-side caching, handled by Apollo itself, is working nicely as expected, but I want to extend caching to the server to improve performance even further.
This is a simplified version of what my current
[...slug].vue
looks like:I’ve done quite a bit of research, but I think I’m stuck and could really use some guidance.
Any help or pointers would be greatly appreciated!
Thanks a lot in advance!
The text was updated successfully, but these errors were encountered: