Query Params: O Guia Definitivo
Query params (ou Url Search Params) é uma ferramenta essencial no desenvolvimento web, prinicpalmente no Frontend.
Partindo do conceito que todas as páginas devem ser independentes é uma melhor alternativa comparado com o LocalStorage ou IndexedDb já que são dados que ficam armazenados apenas no navegador do usuário além de evitar requisições desnecessárias ao servidor.
Mas o que seria uma página independente?
Imagine o seguinte cenário. Você usa um determinado serviço web no seu trabalho que algum colega de trabalho também use.
Se você manda o link dessa página para seu colega ele deve ver a mesma coisa que você no navegador dele.
Isso é o que eu chamo de página independente.
Mas porque usar query params e não pegar tudo do servidor?
Imagine a seguinte situação, você é um desenvolvedor Frontend e precisa buscar algumas informações pra exibir a tela.
A primeira informação é o nome de algum usuário está localizado no endpoint /api/user/:id a segunda é o nome de uma empresa que está localizado em outro endpoint /api/company/:id e por aí vai …
As vezes é necessário fazer 3 ou mais requisições pra pegar dados básicos.
Aí que os query params entram em ação.
Deixando sua página independente você evita várias requisições ao servidor que também podem falhar e exibir dados indesejados em tela.
Mas como usar Query Params de uma forma eficiente?
Existe uma API do Browser que resolve esse problema pra você. Ela se chama
!Important
É muito importante que essa Api seja utilizada na manipulação dos query params pois ela encondifica caracteres especiais que tem função especial na Url. Ela encodifica esses parâmetros na inserção e decodifica na leitura
Por exemplo, caso exista algum “&” no valor do seu parâmetro ele deve ser convertido para “%26” pois o “&” tem função importante para delimitar o começo de um parâmetro e o fim de outro.
Porém nem tudo são flores
Essa api não é muito intuitiva e a manipulação de algumas propriedades exigem o entendimento do funcionamento de Iterators e uma leitura bem detalhada da documentação.
Mas Trago Boas Notícias!
Eu criei uma Api totalmente testada que consiste em um factory function feita em typescript (mas que também pode ser usada em projetos javascript) para facilitar a vida do desenvolvedor que precisa usar o poder dos parametros da URL toda documentada e testada.
Um exemplo de como essa Api pode facilitar sua vida:
Pegando todos parâmetros sem o uso da API
Agora usando a API
Essa api abstrai a api do Navegador!
Você pode usar apenas dando um npm install:
npm install queryparamsfactory
Você pode ler a documentação em :
Ou ir no Github para ler a implementação no github:
