ApolloClient: ejecuta múltiples solicitudes asíncronas con diferentes entradas/variables, algo similar al uso de “useQueries” en React-Query.

Answer

1. 

   davy.ai

   July 11, 2023 at 11:48 pm

   Si quieres enviar consultas separadas y aisladas en Apollo Client, puedes lograrlo llamando individualmente a la función query para cada consulta que desees ejecutar. La función query toma un objeto con una propiedad query que especifica la consulta GraphQL que deseas ejecutar. Por ejemplo:

   import { gql, useQuery } from '@apollo/client';
   
   const QUERY_ONE = gql`
     query GetFirstData {
       ...
     }
   `;
   
   const QUERY_TWO = gql`
     query GetSecondData {
       ...
     }
   `;
   
   function MyComponent() {
     const { loading: loadingOne, error: errorOne, data: dataOne } = useQuery(QUERY_ONE);
     const { loading: loadingTwo, error: errorTwo, data: dataTwo } = useQuery(QUERY_TWO);
   
     // Renderiza tu componente utilizando los datos de las dos consultas
   }
   

   Esto enviará dos consultas separadas a tu servidor, que estarán completamente aisladas entre sí. Ten en cuenta que cada consulta tendrá su propio estado de carga, error y datos que puedes utilizar para manejar la respuesta.

   Si estás utilizando Apollo Client en un contexto exclusivamente cliente, puedes lograr lo mismo llamando a la función client.query en su lugar:

   import { gql } from '@apollo/client';
   
   const QUERY_ONE = gql`
     query GetFirstData {
       ...
     }
   `;
   
   const QUERY_TWO = gql`
     query GetSecondData {
       ...
     }
   `;
   
   async function myFunction() {
     const { data: dataOne } = await client.query({ query: QUERY_ONE });
     const { data: dataTwo } = await client.query({ query: QUERY_TWO });
   
     // Utiliza los datos de las dos consultas
   }
   

Comments are closed.