Podemos hacer eso. Aquí mismo, solo estamos obteniendo una lista. Obtenemos una lista de los primeros 10. Pero podemos cambiar esta consulta fácilmente para permitirnos buscar un producto específico en lugar de solo una lista. Y esa consulta está nuevamente en el documento y en el tutorial. Verás que lo cambiamos de, en realidad, lo pegaré justo después para que puedas verlo. Pasamos de consultar productos, en plural, y pedir algunos y solicitar los primeros 10, a consultar un solo producto que tenga el identificador snowboard. Así que lo eliminaremos, ejecutaremos esto y ahora obtendremos solo un producto. Y nuevamente, como hicimos antes, puedes presionar control espacio, puedes ver qué otra información hay aquí, podemos obtener la descripción, podemos volver a ejecutar eso, podemos obtener cualquier otra información útil que haya aquí, y muchas de estas son bastante profundas. Como podemos obtener imágenes y debajo de las imágenes hay otro conjunto de bordes y nodos, y esos tienen URLs y podemos ir y podemos ir y podemos obtener todas estas cosas. Hablaremos un poco más sobre esto en un minuto, lo arruiné, pero ignora mi mal
GraphQL. Pero la idea es que puedes profundizar mucho en esto, debido a cómo funciona
GraphQL. No queremos profundizar demasiado en esto, estaremos utilizando algunas consultas avanzadas en un momento, pero como dije, no es muy importante que lo entiendas, porque
hydrogen te dirá si te equivocas o si falta
data que necesita, te lo hará saber y lo veremos en un momento. De todos modos, ahora podemos tomar eso, y luego podemos buscar un elemento de identificador específico. Estamos consultando snowboard, lo cual está bien, pero nuevamente, esta es una página dinámica, no siempre querremos buscar solo el snowboard. Entonces, podemos cambiar esta consulta una vez más, y podemos hacer que sea una consulta que pueda tomar una variable. Nuevamente, lo pegaré justo debajo para que podamos verlo, estamos cambiando el tipo de definición de consulta, supongo que podríamos llamarlo, y configurándolo para tomar una variable $handle, y luego pasamos ese identificador a nuestra consulta, por lo que eso nos permitirá pasar cualquier cadena que queramos para poder buscar ese producto. Entonces, lo que sea que esté en nuestra URL, lo pasaremos como argumento. No puedes verlo realmente aquí, pero aquí abajo hay esta pequeña cosa de variables de consulta que si tienes mucho cuidado, en realidad puedes arrastrarla hacia arriba, y esta es un área que requiere un poco de JSON que cumple con las variables de la consulta que tenemos arriba. Y nuevamente, es realmente inteligente, lo cual es genial. Puedo comenzar a escribir y dirá, oh, obviamente necesitas proporcionarnos la variable handle porque está definida en nuestra consulta, y aquí podemos escribir snowboard. Y podemos ejecutar eso, y se ve exactamente igual excepto que eliminé la descripción, pero se ve exactamente igual. Ahora podemos cambiar eso a oxygen o lo que sea. Si consultamos un producto que no existe, simplemente devuelve nulo. Entonces, ahora tenemos una consulta codificada que podemos pasar dinámicamente a una variable. Con eso, podemos tomar eso y ponerlo en la página del producto. Sí, en nuestra página de producto,
Hydrogen viene con un gancho de consulta de la tienda, que básicamente podemos tomar la consulta que acabamos de escribir en el gráfico y traducirla a nuestro código
React para hacer básicamente lo mismo que estábamos probando. Entonces, para probar esto, primero importemos el gancho de consulta de la tienda y la biblioteca de etiquetas
GraphQL. Y solo quiero señalar aquí que el gráfico y esta biblioteca de etiquetas
GraphQL son bastante comunes si te sientes cómodo trabajando con aplicaciones
GraphQL en otros lugares. Esto no es específico de
Hydrogen. El uso del gancho de consulta de la tienda es obviamente específico, pero si te sientes cómodo con
GraphQL, todo esto debería parecer bastante familiar. Y si estás pensando, oh, no sé qué está pasando, gran parte de esto es solo un poco de
GraphQL básico. Por lo tanto, puedes obtener más información al respecto en recursos específicos de
GraphQL, no tanto de
Shopify. OK. Usando ese gancho de consulta de la tienda, podemos pegar esa misma consulta que acabamos de tener en el gráfico a la izquierda. Aquí, solo estamos usando ese gancho de consulta de la tienda. Acepta dos elementos, la consulta, que es la misma consulta que acabamos de tener, y luego las variables, que son las mismas que las variables que vimos en las variables de consulta en la parte inferior. Y esa constante
data simplemente tomará los datos devueltos. Una vez que se haya completado ese gancho, lo almacenamos en un objeto de
data. Y sí, básicamente hemos copiado del gráfico y lo hemos traducido a nuestro código
react. Si revisamos la página de ejemplo de productos, eso ejecutará este gancho ahora. Y puedes ver que, en la URL, el ejemplo sabemos que en realidad no es un identificador de producto válido. Entonces, obtenemos un nulo en la
terminal del servidor. Si actualizamos la URL a algo que sabemos que existe, como ese snowboard que acabamos de ver antes, deberíamos poder obtener tanto el ID como el título registrados en la
terminal del servidor. Esencialmente, lo mismo que estábamos haciendo antes, lo hicimos funcionar en el gráfico y lo tradujimos a nuestro componente
React. Una cosa que podemos hacer mientras estamos en esta área es extraer esa consulta
GraphQL. Las consultas pueden volverse bastante grandes y difíciles de manejar, y spoiler alert, lo serán para nosotros cuando lleguemos a obtener más información del producto. Entonces, simplemente lo extraeremos a una variable y lo colocaremos al final de la página. Así que está un poco fuera de nuestro camino. Genial.
Comments