Quiero usar la biblioteca https://github.com/apollographql/graphql-tag Estoy buscando a alguien más inteligente que yo que entienda cómo usarla.
Digamos que tengo un documento de consulta de GraphQL así:
const query = gql` { user(id: 5) { ...User_user } } ${userFragment} `¿Cómo obtengo ahora la cadena para agregar en la solicitud del cuerpo http? Termino con un objeto, que me permite hacer algo de introspección y manipulaciones, genial, pero ¿cómo obtener la cadena del cuerpo real para la solicitud del servidor?
Me estoy perdiendo algo obvio, supongo...
El objeto que obtiene al aplicar qql a su código de consulta de graphql es el AST (árbol de sintaxis abstracta) para graphql. Este AST normalmente se usa con el cliente apollo para ejecutar solicitudes. Sin embargo, puede usar cualquier otra biblioteca que sea capaz de ejecutar solicitudes GraphQL usando AST.
Suponiendo que esté dispuesto a usar Apollo, aquí hay un ejemplo en su sitio web de cómo funciona ( https://www.apollographql.com/docs/react/data/queries ).
import { gql, useQuery } from '@apollo/client'; const GET_DOGS = gql` query GetDogs { dogs { id breed } } `; function Dogs({ onDogSelected }) { const { loading, error, data } = useQuery(GET_DOGS); if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return ( <select name='dog' onChange={onDogSelected}> {data.dogs.map((dog) => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }Este ejemplo es para React with hooks (esta es una forma principal de usar Apollo). Si aún desea usar Apollo pero no usa React, entonces puede usar ApolloClient y aún usar su AST para ejecutar consultas. Vea el enlace a continuación para aprender cómo usar ApolloClient directamente.
https://www.apollographql.com/docs/react/api/core/ApolloClient/
Finalmente, si no está dispuesto a molestarse con Apollo y/o AST, simplemente puede ejecutar la consulta directamente. En este caso, no necesita usar gql y analizarlo en AST. Vea un ejemplo simplificado pero funcional a continuación.
const query = ` query($id: Int!) { user(id: $id) { id login email } } `; const variables = { id: 5 }; const result = await fetch("http://your-graphql-backend.tld", { method: "POST", body: JSON.stringify({ query, variables, }), headers: { "content-type": "application/json", } });Nota: La implementación anterior (especialmente la parte de consulta) depende de su esquema de GraphQL y la implementación de backend. Puede diferir, pero en principio, esto debería funcionar con la mayoría de los backends de graphql modernos.