N
Nuxt•4d ago
amueller82

Special Chars in Query params in useFetch()

Hi everyone! My Backend expects query params for filter use case to be like: http://localhost:3000/cats?search=i&filter.age=$gte:3 The Filter name includes a special char (.) -> e.g. &filter.age= How do I provide the parameters that they are not ignored?
2 Replies
kapa.ai
kapa.ai•4d ago
Hi @amueller82. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle special characters in query parameters when using useFetch() in Nuxt, you can use the query option and leverage JavaScript's object notation. Here's how you can approach this: 
const age = ref(3)

const { data } = await useFetch('<http://localhost:3000/cats',> {
  query: {
    search: 'i',
    'filter.age': `$gte:${age.value}`
  }
})
const age = ref(3)

const { data } = await useFetch('<http://localhost:3000/cats',> {
  query: {
    search: 'i',
    'filter.age': `$gte:${age.value}`
  }
})
In this example, we're using an object to define the query parameters. The key 'filter.age' is enclosed in quotes to preserve the dot notation. Nuxt will automatically encode these parameters correctly when constructing the URL. This approach is based on the information provided in the Nuxt documentation on useFetch, which states that the query option "Adds query search params to URL using ufo". It's worth noting that Nuxt uses the ufo library to handle URL operations, which should properly encode special characters in query parameters. If you need to construct more complex URLs or have dynamic parameters, you can also use a computed URL as described in the Nuxt documentation on Computed URL. Remember that when using special characters or symbols in your URLs, it's crucial to ensure they are properly encoded to avoid any issues with request parsing on the server side. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@991707183123288175> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?