Juan Sifontez

DailyCode #3

November 28, 2020

Lentes sobre una laptop con código detras

Te doy la bienvenida al DailyCode #3. 🤗 Hoy fue un día en el cual avancé la mitad de lo planeado, pero aprendí cosas que aún tengo que digerir y puede que me sirvan para un post futuro. 🔥

Hoy continué realizando el tutorial de graphql con react + apollo. Específicamente aprendí a realizar Queries y Mutations.

Queries con Apollo Client

Existen 2 formas de realizar consultas con ApolloClient. La primera es utilizar el método query directamente en ApolloClient. Este método nos permitirá traer los datos del servidor y manejarlos como una promesa, te mostraré un ejemplo con una lista de amigos:

client.query({
  query: gql`
    {
      listaDeAmigos {
        id
	nombre
	gruposEnComun
      }
    }
  `
}).then(response => console.log(response.data.listaDeAmigos))

La segunda forma, es utilizar la render prop API de apollo. De esta forma se puede manejar los datos utilizando los componentes.

React también tiene render props (supongo que Apollo desarrolló su API de ellos) y, según la página de react:

Render props se refieres a la técnica de compartir código entre componentes utilizando una propiedad cuyo valor sea una función

via GIPHY

Ahora, todo lo que debemos realizar es utilizar el component <Query> y pasarlo como propiedad la petición de datos que se desea realizar.

Cada proceso de petición es similar a los siguientes 3 pasos:

  1. Asigna la petición a una constante que utiliza la función gql
    const TRAER_AMIGOS = gql`
  {
    listaDeAmigos {
      id
      nombre
      gruposEnComun
    }
  }
`
  2. Utiliza el componente <Query> pasadole como props la petición realizada en el paso 1
  3. Accede al resultado de la consulta que es compartido via render prop function
    return (
  <Query query={TRAER_AMIGOS}>
    {() => data.listaDeAmigos.map(amigos => <Amigo key={amigo.id} amigo={amigo} />)}
  </Query>
)

Y para que todo eso funcione, se debe importar el componente Query y la función gql.

import { Query } from 'react-apollo'
import gql from 'graphql-boost'

Funciones agregadas por apollo

Apollo agrega ciertas funciones a las render prop funcition de los componentes que podemos utilizar:

  1. loading: Es un valor Booleano que será verdadero (true) mientras la respuesta de los datos aún no se ha recibido
  2. error: Este argumento contiene toda la información del error en caso de que ocurra
  3. data: Este es el valor de la respuesta recibida del servidor. En el caso de arriba, contiene la listaDeAmigos

Existen más opciones que puedes encontrar en la documentación de Apollo Queries.

La función gql

via GIPHY

Pudiste ver que las peticiones realizar se escribieron utilizando la función gql de apollo-boost. Como estamos utilizando GraphQL las peticiones se deben realizar en en el lengujae de GraphQL. Esto no puede ser hecho desde un archivo de javascript.

Para ello existe la función gql que sirve como un parser para expresar las peticiones hacia GraphQL como una cadena de texto con tagged templates.

Realizar Mutaciones con Apollo Client

Hasta este momento aprendí muchas cosas que me sirvieron para ir más rápido en este tutorial, ya que los 3 pasos para realizar queries, se utilizan para realizar mutaciones.

Por lo tanto, se debe realizar lo siguiente

  1. Escribir la mutación utilizar la función gql
    const POST_MUTATION = gql`
  mutation PostMutation($description: String!, $url: String!) {
    post(description: $description, url: $url) {
      id
      createdAt
      url
      description
    }
  }
`
  2. Importar y utilizar el componente <Mutation> pasandole como props las variables que necesite
    <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
  {() => (
    <button onClick={`...`}>
      Submit
    </button>
  )}
</Mutation>
  3. Utilizar la función mutation que es inyectada en las render prop function del componente
    <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
  {postMutation => <button onClick={postMutation}>Submit</button>}
</Mutation>

Y listo, ya puedes utilizar ese componente y ejecutar mutaciones a la base de datos.

¿Y los hooks?

Todo muy bonito y todo, peeeeeeeeero… No vi que utilizar hooks.

Bien, resulta que este tutorial fue escrito hace 3 años, utilizan la versión 16.2.0 de react, y los react hooks vienen con react 16.6.0.

Realizando una investigación pude encontrar que para utilizar los hooks con apollo necesitas instalar la dependencia @apollo/react-hooks y listo, ya puedes utilizar hooks para tus query, mutaciones y demás.

Yo voy a intentar actualizar el tutorial utilizando hooks. Ya encontré una buena guía 😏 que te dejaré en las referencias.

Nos leemos

Debo resaltar que hay cosas que la forma de realizar mutaciones NO me quedó del todo clara. Por ello debo realizar una mejor investigación y quizá pueda que salga un post a parte de ello.

Debo resaltar que hay 2 cosas que NO me quedaron claras:

  1. La forma de realizar mutationes
  2. Qué son las render prop function de react y cómo funcionan

Puede que esos dos temas me sirvan para realizar post para poder entenderlos mejor.

Ahora me despido, muchas gracias por leer esto. Si te gustó este post (que lo uso a modo diario dev) puedes enviarme un tweet. Y vamos… Si no te gustó, también puedes hacerlo. De ambas formas estaré muy agradecido.

Un abrazo. 🤗 Nos leemos… 👋🏼

bob esponja despidiéndose

Referencias