Hi there, this might be a bit project-specific, but is it possible to get nuxt.js working with this apollo module in terms of dynamic routes generation?
Example (small part of my app – the main question is at the end, but the intro may be useful to read, too, thanks in advance):
I have an app, listing some shops that I get from an API (obviously...) and I list them in pages/shops/index.vue
via the following:
index.vue content: (apollo
part only):
apollo: {
allShops: {
prefetch: true,
query: allShops,
update (data) {
return data.site.shops.by_category.edges
},
variables () {
return {
language: this.$store.state.language,
category: this.category
}
},
skip () {
return !this.$store.state.language
}
}
}
allShops.gql content:
site(language: $language) {
shops {
by_category(category: $category, pagination: {sort: {field: name}, limit: 100}) {
total
edges {
node {
id
slug
name
latitude
longitude
opening_html
}
}
}
}
}
}
This list works perfectly, I can filter, search, etc etc, but this is not the main point :)
shops/_slug.vue content for a single shop (the apollo part only):
apollo: {
Shop: {
query: shop,
update (data) {
return data.site.shops.by_slug
},
prefetch: ({ route }) => ({ slug: route.params.slug }),
variables() {
return { slug: this.$route.params.slug }
}
}
}
shop.gql content for a single shop, by slug:
query Shop($slug: String!) {
site {
shops {
by_slug(slug: $slug) {
id
slug
name
latitude
longitude
}
}
}
}
These stuff work like a charm, the app is fast, with smooth transitions and fast load times, (thumbs up, @Atinux, @alexchopin and @Akryum – and of course, the whole team).
BUT HOW DO I GENERATE ALL THES SHOPS' DYNAMIC ROUTES WITH NUXT.JS?
I actually have no idea (this is my fault, I am still learning GraphQL... So if anyone has any idea how to generate all the shops' routes like /shops/shop-slug.html
, please help :)
All comments are appreaciated, and maybe this is just an issue because of my lack of knowledge on promises, payload or whatever this requires :)
Thnak you!