N
Nuxt•3d ago
salomon_.

How to format query?

In $fetch('/something', { query: {regions: [1,2,3] } }); so call to the server should be http://localhost:3000/something?regions[0]=1&regions[1]=2&regions[2]=3
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @salomon_.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To format query parameters with arrays in Nuxt's $fetch, you need to understand how query parameters are serialized. By default, Nuxt uses unjs/ofetch for $fetch, which in turn uses unjs/ufo for URL creation and query parameter handling. When you pass an array in the query object like {regions: [1,2,3]}, it will be automatically serialized. However, if you want to specifically format it as regions[0]=1&regions[1]=2&regions[2]=3, you can use the params option with the appropriate format. Here's how you can achieve this: 
$fetch('/something', {
  query: {
    regions: [1, 2, 3]
  }
});
$fetch('/something', {
  query: {
    regions: [1, 2, 3]
  }
});
This should automatically serialize the array in the format you're looking for. If you need more control over the query string format, you can look at the example from the knowledge sources where a custom query parser is defined: 
// Example of custom query string handling from Nuxt config
router: {
  parseQuery: (query) => {
    const querystring = require('query-string')
    return querystring.parse(query, {
      arrayFormat: 'index',
      skipNull: false,
    })
  },
  stringifyQuery: (data) => {
    const querystring = require('query-string')
    const query = querystring.stringify(data, {
      arrayFormat: 'index',
      skipNull: false,
    })
    return query.length > 0 ? '?' + query : ''
  }
}
// Example of custom query string handling from Nuxt config
router: {
  parseQuery: (query) => {
    const querystring = require('query-string')
    return querystring.parse(query, {
      arrayFormat: 'index',
      skipNull: false,
    })
  },
  stringifyQuery: (data) => {
    const querystring = require('query-string')
    const query = querystring.stringify(data, {
      arrayFormat: 'index',
      skipNull: false,
    })
    return query.length > 0 ? '?' + query : ''
  }
}
The arrayFormat: 'index' option is what gives you the regions[0]=1&regions[1]=2&regions[3]=3 format. For more information on query parameters in Nuxt, you can refer to the useFetch documentation which explains how to use the query option with useFetch, which is a wrapper around $fetch. I hope this helps with formatting your query parameters! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@1029431292170874910> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?