Saltar al contenido

Cómo empezar con GraphQL, Apolo y reaccionar hooksDec, 15thIn esta guía, vamos a aprender acerca de cómo traer y … mutan

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de la manera de traer y mutar los datos del API GraphQL en reaccionar mediante el uso de aplicaciones cliente de Apolo, reaccionar ganchos.

Estamos utilizando la API de GitHub GraphQL con fines de aprendizaje.

Nota: si usted se pegó en cualquier parte de este tutorial, a continuación, por favor refiérase al repositorio de código final en la instalación de GitHub

el conjunto reaccionan de aplicación

amainó la aplicación reaccionan mediante el uso de la aplicación crear una reacción.

npx create-react-app react-apollo

El comando anterior descargará los archivos necesarios en el “reaccionar-apolo” carpeta para iniciar la aplicación reaccionar.

cambiar el directorio de trabajo a “reaccionar-Apolo”.

cd react-apollo
npm start

comando de arranque NPM se utiliza para iniciar el servidor de desarrollo local.

Ahora tenemos que instalar los paquetes del cliente Apolo.

Ejecutar el siguiente comando en su terminal.

npm install apollo-boost @apollo/react-hooks graphql

Este comando anterior descargará los tres paquetes que son Apollo-impulso, Apollo / @ reaccionar anzuelos y graphql.

Conexión con GitHub GraphQL API

puede abrir su cuenta de GitHub y vaya a Configuración y luego haga clic en la configuración de desarrolladores y generar acceso personal de token seleccionando los campos.

Nota: copia el token de acceso personal y guardarlo en su PC porque el token sólo es visible una vez.

Ahora abra su index.js archivo en su aplicación y reaccionan añadir el siguiente código con su token de acceso personal.

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import App from './App';
import ApolloClient from "apollo-boost";

const client = new ApolloClient({
uri: "https://api.github.com/graphql", request: operation => {
operation.setContext({
headers: {
authorization: `Bearer your-personal-access-token` },
});
}
});

render(, document.getElementById('root'));

Aquí importar un constructor ApolloClient del paquete Apollo-boost y una instancia del cliente.

uri : El criterio de valoración graphql que estamos utilizando para recuperar los datos.

solicitar : Para cada solicitud , estamos enviando la cabecera de autorización para verificar el usuario actual.

Conexión de cliente con Reaccionar

Ahora tenemos que conectar el cliente con reaccionar mediante el uso de componente que se importa desde el Apollo / paquete @ reaccionar ganchos. El componente ApolloProvider nos ayuda a acceder al cliente en cualquier lugar de nuestro árbol de componentes de aplicaciones.

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import App from './App';
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
const client = new ApolloClient({
uri: "https://api.github.com/graphql",
request: operation => {
operation.setContext({
headers: {
authorization: `Bearer your-personal-access-token`
},
});
}
});

render(

, document.getElementById('root'));

Recogida de datos a partir de componentes

Ahora podemos obtener los datos directamente desde nuestro reaccionar componentes usando el gancho useQuery.

useQuery gancho acepta la consulta como un primer argumento y devuelve un objeto con tres propertiesdata, carga y error.

datos : Contiene los datos que viene de regresar de nuestra API graphql.

carga : La carga propiedad es cierto cuando la consulta se encuentra todavía en proceso.

error : El error propiedad contiene errores Relacionados con los datos.

Abrir el archivo de app.js y añada el siguiente código.

import React from 'react';
import './App.css';
import { gql } from 'apollo-boost'
import { useQuery } from '@apollo/react-hooks'
function App() {

const { loading, error, data } = useQuery(gql` {
viewer {
name
email
}
}`);

if (loading) return

loading...

if (error) return

{error.message}

;
return (

Name: {data.viewer.name}

Email: {data.viewer.email}

);
}

export default App;

Ahora podemos ver el nombre y el correo electrónico se representa en la pantalla.

Paso de argumentos a consultas

También podemos pasar argumentos a las consultas Veamos un ejemplo.

Crear un nuevo archivo llamado my-repostiories.js en la carpeta src y añadir el siguiente código.

import React from 'react';
import { useQuery } from '@apollo/react-hooks';

const reposQuery = gql`
{
viewer {
repositories(first: 5) { edges {
node {
name
}
}
}
}
}
`;

function Myrepositories() {

const { loading, error, data, refetch } = useQuery(reposQuery);

if (loading) return

loading...

if (error) return

{error.message}

;
let currentLength = data.viewer.repositories.edges.length;

return (

First {currentLength} repositories

{data.viewer.repositories
.edges.map(({ node }) =>

  • {node.name}
  • stars {node.stargazers.totalCount}

)}

);
}

export default Myrepositories;

En el código anterior, hemos creado un reposQuery con un argumento (primera: 5) `por lo que sólo podemos obtener 5 primeros repositorios.

Ahora tenemos que actualizar nuestro componente de aplicaciones mediante la adición de un componente Myrepositories.

import React from 'react';
import './App.css';
import { gql } from 'apollo-boost'
import { useQuery } from '@apollo/react-hooks'
import Myrepositories from './my-repositories'
function App() {
const { loading, error, data } = useQuery(gql` {
viewer {
name
email
}
}`);
if (loading) return

loading...

if (error) return

{error.message}

;
return (

Name: {data.viewer.name}

Email: {data.viewer.email}

);
}

export default App;

Ahora se va a ver los primeros 5 depósitos se cargan en los medios de mutación.

mutaciones

En GraphQL a actualizar o suprimir o añadir datos.

Apolo engancha paquete nos da un gancho useMutation mediante el uso de este gancho podemos enviar mutaciones a la API GraphQL.

El useMutation gancho toma el mutación como primer argumento y devuelve la matriz con función mutar y objeto que contiene la carga, de datos, y las propiedades de error.

ahora estamos implementando dos componentes Addstar y elimina alquitrán que se utiliza para agregar una estrella o una estrella quitar a los repositorios.

crear un nuevo archivo llamado addstar.js en la carpeta src y añadir el siguiente código.

import React from 'react';
import { gql } from 'apollo-boost';
import { useMutation } from '@apollo/react-hooks';
const ADD_STAR = gql`
mutation AddStar($repoid:ID!){ addStar(input:{starrableId:$repoid}){
starrable{
stargazers{
totalCount
}
viewerHasStarred
}
}
}`

function AddStar(props) {

const [addStar, { loading, error }] = useMutation(ADD_STAR)
return (


{loading &&

processing...

}
{error &&

{error.message}

}

)
}
export default AddStar;

En el código anterior, pasamos una mutación ADD_STAR a useMuation gancho y devuelve una matriz con función de mutar, objeto.

La función mutar puede aceptar las variables como un argumento de manera que pasamos repoid porque estamos añadiendo una estrella al repositorio utilizando su ID.

Vamos a crear un componente elimina alquitrán ahora.

import React from 'react';
import { gql } from 'apollo-boost';
import { useMutation } from '@apollo/react-hooks';
const Remove_Star = gql`
mutation RemoveStar($repoid:ID!){ removeStar(input:{starrableId:$repoid}){
starrable{
stargazers{
totalCount
}
viewerHasStarred
}
}
}`

function RemoveStar(props) {

const [removeStar, { loading, error }] = useMutation(Remove_Star)
return (


{loading &&

processing...

}
{error &&

{error.message}

}

)
}

export default RemoveStar;

En este componente, que están pasando una mutación Remove_star al gancho useMutation.

Ahora actualizar su archivo mi-repositories.js con el siguiente código.

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import AddStar from './addstar'
import RemoveStar from './removestar'

const reposQuery = gql`

query Myrepositories{
viewer {
repositories(first:5) {
edges {
node {
id
name
stargazers{
totalCount
}
viewerHasStarred
}
}
}
}
}
`

function Myrepositories() {

const { loading, error, data, refetch } = useQuery(reposQuery)

if (loading) return

loading...

if (error) return

{error.message}

;
let currentLength = data.viewer.repositories.edges.length;

return (

First {currentLength} repositories

{data.viewer.repositories
.edges.map(({ node }) =>

  • {node.name}
    {node.viewerHasStarred ? : }
  • stars {node.stargazers.totalCount}

)}

);
}

export default Myrepositories;

En el código anterior, primero se importó un Addstar componentes y elimina alquitrán entonces se añadió toMyrepositories componente con la representación condicional que significa que sólo se ve componente elimina alquitrán si ya está añadido una estrella a su repositorio de lo contrario se verá un componente Addstar .

Vamos a ver ahora la salida.

usted ha visto a nuestra interfaz de usuario está actualizado mediante la adición o eliminación de una estrella en el repositorio?

Código

refactorización

Si nos fijamos en el componente Myrepositories ya se hace grande y desordenado podemos hacer que limpia mediante la eliminación de todas las consultas y las mutaciones de nuestros componentes reaccionan y colocarlo en un archivo separado.

crear un nuevo archivo llamado queries.js en su carpeta src y añadir todas las consultas que tenemos actualmente.

import { gql } from 'apollo-boost'

const reposQuery = gql`

query Myrepositories{
viewer {
repositories(first:5) {
edges {
node {
id
name
stargazers{
totalCount
}
viewerHasStarred
}
}
}
}
}
`

const userQuery = gql` {
viewer {
name
email
}
}`

export { reposQuery, userQuery };

Ahora podemos importar consultas del archivo queries.js cada vez que se le pide.

mismo que nosotros podemos hacerlo por mutaciones mediante la creación de un nuevo archivo llamado mutations.js

import { gql } from 'apollo-boost'

const ADD_STAR = gql`
mutation AddStar($repoid:ID!){
addStar(input:{starrableId:$repoid}){
starrable{
stargazers{
totalCount
}
viewerHasStarred
}
}
}`

const Remove_Star = gql`
mutation RemoveStar($repoid:ID!){
removeStar(input:{starrableId:$repoid}){
starrable{
stargazers{
totalCount
}
viewerHasStarred
}
}
}`

export { ADD_STAR, Remove_Star };

Ahora podemos importar mutaciones del archivo mutations.js cada vez que se le pide.

Código

repository