🌇 🤞🏽 🚣🏼 Trabalhar com uma string de consulta no React 👨‍👧‍👦 👩🏿‍🌾 🧛🏻

Ei. Este é o artigo sobre o pacote que perdi ao trabalhar com o react.

imagem

Para ser mais específico, sobre um pacote para melhorar e facilitar o trabalho com as consultas da barra de pesquisa.

Como você faz isso agora

Recuperando valores

Como você obtém o valor da string de consulta? Eu acho algo assim:

const { item } = queryString.parse(props.location.search);

ou se você estiver familiarizado com URLSearchParams, pode fazer assim:

const params = new URLSearchParams(props.location.search);
const item = params.get('item');

Qual opção é mais preferível não está totalmente clara, uma vez o primeiro puxa o pacote npm, mas funciona em qualquer lugar, e o segundo está embutido no navegador, mas pode haver problemas com o IE ( mozilla ).

Valores de configuração

Nós resolvemos, de alguma forma, mas ainda obtivemos exatamente o mesmo resultado que queríamos. Vamos prosseguir para definir os valores. Isso tudo é feito usando history.push, que pega uma string com parâmetros já adicionados. Por exemplo, assim:

history.push('/path?item=my-item-data')

Para construções mais complexas, você precisará usar uma string de consulta:

const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${query}`);

ou URLSearchParams:

const query = new URLSearchParams();
query.set("item", "my-item-data");
history.push(`/?${query}`);

Efeitos

OK. Apesar do fato de que sempre recebemos dados de string (e precisamos analisá-los), também há um problema se esperarmos um dígito, mas uma palavra vier (o usuário não está proibido de alterar a consulta na string), teremos que fazer verificações e empurrar o valor você mesmo.

A maior parte da dor surge quando é necessário que os campos de solicitação dependam dos componentes que agora são exibidos, agora cada componente funcionará com um estado global, e alterá-lo a seu critério, contando com o valor já existente, você terá que adicionar não apenas seus próprios valores para adicionar , e também todo o resto a ser ajustado, algo assim:

const oldQuery = queryString.parse(location.search);
const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${{...oldQuery,  ...query}}`);

Claro, muito provavelmente você moverá isso para uma função e já será mais conveniente trabalhar com ela. Mas então você terá que delimitar funções para ler valores, verificar valores, de alguma forma lidar com os erros associados aos valores passados e até mesmo empurrá-los novamente, caso contrário, alteramos o valor para nós mesmos e deixamos a string igual.

Você também precisa limpar o valor depois de você mesmo mais tarde, é claro que o history.push fará isso por você, mas é muito mais fácil não se preocupar com isso e deixar que outros façam isso em vez de você.

OK. O que estou sugerindo?

Acho que fiz isso por você e de uma forma mais conveniente. A seguir, falaremos sobre o pacote npm react

-location-query , que pode valer a sua atenção.

O pacote implementa ganchos e componentes HOC (apenas um invólucro sobre os ganchos) para definir as regras para os parâmetros na barra de pesquisa, onde definimos o valor em um dos componentes, ou podemos obtê-lo em qualquer outro componente (ainda mais alto na árvore, mas você não deve fazer isso) )

Exemplo

Por exemplo, há uma página UsersPage com os componentes UsersList e Controls. UsersList é para carregar e exibir uma lista de usuários, e Controls é para definir a filtragem do usuário. Tudo pode ser representado assim:

const UsersPage = () => {
  const [type] = useLocationField('type', 'github');

  return ...;
}

const UsersList = () => {
  const [page, setPage] = useLocationField('page', {
    type: 'number',
    initial: 1,
    hideIfInitial: true
  });
  const [limit, setLimit] = useLocationField('limit', {
    type: 'number',
    initial: 20,
    hideIfInitial: true
  });
  const [type] = useLocationField('type');

  return ...;
}

const Controls = () => {
  const [type, setType] = useLocationField('type');
 //     type  setType
  return ...;
}

Como podemos ver, para os campos de página e limite, utilizamos um objeto com as seguintes opções:

type — ( , )
initial — ,
hideIfInitial — : , (.. ), ,

Para personalizar o campo e seu valor, existem outros campos, por exemplo, um callback (que retorna um novo valor) em caso de análise impossível do valor (uma string foi passada, mas um número / valor booleano era esperado). Todos esses campos podem ser vistos no README na página do pacote npm ou no github. Também uma

pequena descrição dos ganchos presentes:

useLocationField - gancho para trabalhar estritamente com um valor
useLocationQuery - gancho de vários valores
useLocationQueryExtend - um gancho para trabalhar com muitos valores cujos dados estão fora do escopo dos padrões (por exemplo, json )
useLocationClear - um gancho para começar, você precisa colocá-lo no componente raiz (sem ele, os campos não serão apagados), ou você não precisa colocá-lo se já houver alguns dos ganchos descritos acima

Além disso, além dos ganchos, existem componentes HOC que são seus invólucros para os ganchos.

Rodapé

Este artigo foi escrito para notificar outras pessoas sobre a presença deste pacote. Há muitos outros truques que desejo implementar lá (por exemplo, valor enum), enquanto aguardo feedback e informações se este pacote tem pelo menos um pequeno direito à vida ou é completamente desnecessário.

Trabalhar com uma string de consulta no React