👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Troubleshooting dynamic routes in Nuxt with Sanity.io

13 replies
Last updated: Feb 4, 2021
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.


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,
  },
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?
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
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
(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
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
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
about using the nuxt-sanity module inside nuxt-config.js --&gt; https://github.com/nuxt-community/sanity-module/issues/3
Feb 4, 2021, 2:58 PM
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!
Feb 4, 2021, 3:01 PM
Feb 4, 2021, 3:05 PM
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
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
yeah, the workaround with node-fetch is a bit weird. But if you use the official nuxt client (
import createClient from '@sanity/client'
), you don't need node-fetch and patching fetch.
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.

Was this answer helpful?