Troubleshooting dynamic routes in Nuxt with Sanity.io
13 replies
Last updated: Feb 4, 2021
B
Hello everyone,I am struggling with something and I am surprised I am not able to find a solution out there. (I found an article on medium but their solution did not work for me).
I am using sanity with nuxt and since I am building my app/site with nuxt generate I need to make sure I can create all the dynamic routes in my nuxt.config.js
This is something I have done in other cases using REST APIs and axios.
Actually even in this case I have tried doing the below with axios and it worked.
this works. I basically play with the API using vision and I copy the URL from there and with axios I am able to get this to work.
Anyways this is not good and I want to have my proper GROQ query and use sanity for it as I have done in my components and pages but I cannot get it done.
Is there any link you guys can point me to?
I am using sanity with nuxt and since I am building my app/site with nuxt generate I need to make sure I can create all the dynamic routes in my nuxt.config.js
This is something I have done in other cases using REST APIs and axios.
Actually even in this case I have tried doing the below with axios and it worked.
let dynamicRoutes = () => {
return axios
.get(
`<https://XXXXXXXX.api.sanity.io/v1/data/query/BLABLA?query=YYYYYYYYYYY>`,
axiosconfig
)
.then((res) => {
return res.data.result.map((el) =>
el._type === 'bbb'
? `/detail-bbb/${el.slug}/`
: `/detail-aaa/${el.slug}/`
)
})
}
// and then
generate: {
routes: dynamicRoutes,
},Anyways this is not good and I want to have my proper GROQ query and use sanity for it as I have done in my components and pages but I cannot get it done.
Is there any link you guys can point me to?
Feb 4, 2021, 2:46 PM
Hi! There's a nuxt channel. But give me a second and I'll show you an example repo with Nuxt.
Feb 4, 2021, 2:48 PM
oops I will post there or actually search there first. I did not know about it 🙂
Feb 4, 2021, 2:49 PM
are you using the nuxt-sanity module or the sanity client directly?
Feb 4, 2021, 2:51 PM
S
Hi Jerome. I tried both actually but with no success.In my pages I am importing the @nuxtjs/sanity and I am able to fetch data
Feb 4, 2021, 2:53 PM
S
(also, if your website doesn't have a lot of pages, you could just Nuxt dynamic crawler, which should be enabled by default)
Feb 4, 2021, 2:54 PM
S
hmm now it has a very few pages but I believe it will have a few hundereds soon so I am not sure that is appropriate 🙂
Feb 4, 2021, 2:55 PM
S
I added this note to the readme not long time ago: https://github.com/mornir/snipcart-web#note-on-nuxt-crawler
Feb 4, 2021, 2:56 PM
S
about using the nuxt-sanity module inside nuxt-config.js --> https://github.com/nuxt-community/sanity-module/issues/3
Feb 4, 2021, 2:58 PM
S
thanks Jerome. That is actually why I would rather avoid the crawler. I would soon get expensive sanity bills hehe 🙂
the second link you sent me is the one I actually tried to follow with no success. I guess I will give it another try. I was hoping there was some other official or unofficial documentation about this since I thought it was a common scenario but you reminded me that with the auto crawler not many people needs this probably.
I will give that another try
thanks again!
the second link you sent me is the one I actually tried to follow with no success. I guess I will give it another try. I was hoping there was some other official or unofficial documentation about this since I thought it was a common scenario but you reminded me that with the auto crawler not many people needs this probably.
I will give that another try
thanks again!
Feb 4, 2021, 3:01 PM
S
here's a better example: https://github.com/mornir/movies-web/blob/dev/nuxt.config.js
Feb 4, 2021, 3:05 PM
S
when creating the client, it's important to also pass the name of the dataset (it doesn't default to 'production').
Feb 4, 2021, 3:06 PM
S
thank you! that example you passed me is actually new to me. I will have a look later today but at first sight it looks like it could work for me and probably I also see what I was missing in my previous attempts (I took for granted I did not need to import node-fetch)thank you very much again. I will write here later tonight if the solution worked with more details so that it can be helpful for others
🙂
🙂
Feb 4, 2021, 3:12 PM
S
yeah, the workaround with node-fetch is a bit weird. But if you use the official nuxt client (), you don't need node-fetch and patching fetch.
import createClient from '@sanity/client'
Feb 4, 2021, 3:34 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.