Essayer l'appel useQuery en fonction avec react-apollo-hooks

Question

Je veux appeler useQuery chaque fois que j'en ai besoin,

mais useQuery ne peut pas à l'intérieur de la fonction.

Mon code d'essai est:

export const TestComponent = () => {
...
  const { data, loading, error } = useQuery(gql(GET_USER_LIST), {
    variables: {
      data: {
        page: changePage,
        pageSize: 10,
      },
    },
  })
  ...
  ...
  const onSaveInformation = async () => {
    try {
      await updateInformation({...})
      // I want to call useQuery once again.
    } catch (e) {
      return e
    }
}
...

Comment appeler plusieurs fois useQuery?

Puis-je l'appeler quand je veux?

J'ai cherché plusieurs sites, mais je n'ai pas pu trouver de solutions.

Answer 1

Il y a des réponses mentionnant comment useQuery doit être utilisé, et aussi des suggestions pour utiliser useLazyQuery. Je pense que le principal point à retenir est de comprendre les cas d'utilisation pour useQuery vs useLazyQuery, que vous pouvez lire dans la documentation. Je vais essayer de l'expliquer ci-dessous de mon point de vue.

seQuery est "déclaratif" un peu comme le reste de React, en particulier le rendu des composants. Cela signifie que vous devez vous attendre à ce que useQuery soit appelé à chaque rendu lorsque l'état ou les accessoires changent. Donc en anglais, c'est comme "Hey React, quand les choses changent, c'est ce que je veux que tu interroges".

pour seLazyQuery , cette ligne de la documentation est la clé: "Le hook useLazyQuery est parfait pour exécuter des requêtes en réponse à des événements autres que le rendu des composants". Dans une programmation plus générale, c'est "impératif". Cela vous donne le pouvoir d'appeler la requête comme vous le souhaitez, que ce soit en réponse à des changements d'état/d'accessoires (c'est-à-dire avec useEffect) ou à des gestionnaires d'événements comme les clics sur les boutons. En anglais, c'est comme "Hey React, c'est comment je veux interroger les données".