question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useFetch didn´t work params?

See original GitHub issue

Environment

npx nuxi info
Nuxt CLI v3.0.0-rc.1-27510277.648a70e                                                                                              14:55:19
RootDir: /home/hermes/Projetos/nuxt/prefeitura-de-araripina                                                                        14:55:20
Nuxt project info:                                                                                                                 14:55:20

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.14.0`
- Nuxt Version:     `3.0.0-rc.1-27510277.648a70e`
- Package Manager:  `yarn@3.2.0`
- Builder:          `vite`
- User Config:      `modules`, `publicRuntimeConfig`
- Runtime Modules:  `@nuxtjs/tailwindcss@5.0.3`
- Build Modules:    `-`
------------------------------

👉 Report an issue: https://github.com/nuxt/framework/issues/new                                                                   14:55:20

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

Reproduction

async getDoses() {
    try {
      const token = this.encodeBase64();
      const myHeaders = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT',
        Authorization: `Basic ${token}`,
      };

      var raw = JSON.stringify({
        query: {
          match: {
            estabelecimento_municipio_codigo: '260110',
          },
        },
        size: 0,
        aggs: {
          most_popular: {
            terms: {
              field: 'vacina_descricao_dose',
              size: 5,
            },
            aggs: {
              unique: {
                cardinality: {
                  field: 'paciente_id',
                },
              },
              uniqueCount_bucket_sort: {
                bucket_sort: {
                  sort: [
                    {
                      unique: {
                        order: 'asc',
                      },
                    },
                  ],
                },
              },
            },
          },
        },
      });

      var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        body: raw,
      };
      //@ts-ignore
      const { data } = useFetch(
        'https://imunizacao-es.saude.gov.br/desc-imunizacao/_search',
        requestOptions
      );
      console.log('Data fetch ', data);
    } catch (e) {
      console.log(e);
    }
  }
}

Describe the bug

Brazilian public api:

 urlApi = 'https://imunizacao-es.saude.gov.br/desc-imunizacao/_search';
 username = 'imunizacao_public';
 password = 'qlto5t&7r_@+#Tlstigi';

useFetch works correctly if there are no query params. It connects and gets the data if it is without params query. But if I put params, it stops working.

image

Additional context

I also tried other ways.

unknown

Show me another errors: _rawValue: FetchError: Request with GET/HEAD method cannot have body ()

Logs

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

3reactions
Aareksiocommented, Apr 22, 2022
const params = { a: 1 }
const headers = { 'Authorization': 'Bearer <token>' }

const { data } = await useFetch(
  'https://httpbin.org/get', 
  { params, headers }
)
{
  "args": {
    "a": "1"
  },
  "headers": {
    "Accept": "*/*",
    "Accept-Encoding": "gzip,deflate,br",
    "Authorization": "Bearer <token>",
    "Host": "httpbin.org",
    "User-Agent": "node-fetch"
  },
  "url": "https://httpbin.org/get?a=1"
}

Sending HTTP body with GET, while technically possible (it’s just text), is out of spec. Is your particular API requiring this?

1reaction
Aareksiocommented, Apr 24, 2022

https://github.com/unjs/ohmyfetch#️-json-body

Do not stringify the body yourself and it should work. Either way it is not an issue with nuxt 3, so you can close.

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why useFetch is not working on page change in nuxt3 on ...
useFetch tries to cache the document for you and reuses the cache when you load the next page. To avoid that behavior you...
Read more >
useFetch
React hook for making isomorphic http requests.
Read more >
A better way to work with URLs using vueUse useFetch() + ...
A better way to work with URLs using vueUse useFetch() + useUrl() ... you can work with query parameters, path variables, hash, path...
Read more >
UseFetch Hook, Explained - Medium
UseFetch hook's optional parameters. Automatic fetch. You'll notice in this iteration, we didn't have to write a whole function that described our 'get' ......
Read more >
Fetch - The Modern JavaScript Tutorial
JavaScript can send network requests to the server and load new ... or a request with another method, we need to use fetch...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found