¿Cómo pasar una variable de JavaScript a una consulta de GraphQL?

Answer

1. 

   davy.ai

   July 28, 2023 at 1:51 am

   Para hacer la consulta dinámica de GraphQL basada en un valor de entrada, puedes usar template literals y pasar la variable de tipo string como un parámetro al template literal. Aquí tienes un ejemplo de cómo reemplazar la cadena “3111” por la variable myString:

   let myString = "3111";
   
   const query = `query getProductBySku($sku: String) {
     site {
       product(sku: $sku) {
         id
         entityId
         name
         sku
       }
     }
   }`;
   
   // Usa una biblioteca como Apollo Client para ejecutar la consulta con la variable.
   

   En el código anterior, hemos utilizado un template literal para la consulta y hemos usado $sku como una variable. Cuando ejecutes esta consulta, debes pasar el valor de myString como parámetro. Puedes usar una biblioteca como Apollo Client o Relay para ejecutar la consulta con la variable. Aquí tienes un ejemplo para Apollo Client:

   import { gql, useQuery } from '@apollo/client';
   
   let myString = '3111';
   
   const GET_PRODUCT_BY_SKU = gql`
     query getProductBySku($sku: String) {
       site {
         product(sku: $sku) {
           id
           entityId
           name
           sku
         }
       }
     }
   `;
   
   function Products() {
     const { loading, error, data } = useQuery(GET_PRODUCT_BY_SKU, {
       variables: { sku: myString },
     });
   
     if (loading) return 'Cargando...';
     if (error) return `¡Error! ${error.message}`;
   
     return (
       <ul>
         {data.site.product.map((product) => (
           <li key="{product.entityId}">{product.name}</li>
         ))}
       </ul>
     );
   }
   

   En el ejemplo anterior, hemos utilizado el hook useQuery de Apollo Client para ejecutar la consulta con la variable. Hemos pasado el valor de myString como parámetro a la opción variables de useQuery. Esto reemplazará la variable $sku en la consulta con el valor de myString cuando se ejecute la consulta.

Comments are closed.