Saltar al contenido

Primeros pasos con GraphQL, Reaccionar y Apolo clientFeb, 9thIn este tutorial, vamos a aprender acerca de cómo se ha podido recuperar y actualizar los datos …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo se ha podido recuperar y actualizar los datos de la API GraphQL en reaccionar aplicaciones utilizando el cliente de Apolo.

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

Nota: si usted se pegó en cualquier parte de este tutorial, por favor referirse 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-reaccionar.

npx create-react-app react-apollo

El comando anterior descargará los archivos necesarios en el “reaccionar-apolo” carpeta tostart 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.

Instalación apolo paquetes cliente

npm install apollo-boost react-apollo graphql

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

Conexión con GitHub graphql API

abierto 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 mediante la selección de 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.

Vamos a probar nuestro código mediante la ejecución de una consulta.

En GrapQL, medios de consulta para obtener los datos del API y medios mutación para actualizar o suprimir o añadir datos.

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

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

client
.query({
query: gql`
query GetnameandEmail {
viewer {
email
name
}
}
`
})
.then(res => console.log(res));

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

Abrir la consola y verá un objeto con su nombre y correo electrónico de identificación.

En primer lugar, nos importó la etiqueta del paquete gql Apollo-cliente entonces hemos invocado el método client.query pasando a través de la consulta y se registra la respuesta en la consola.

conectar el cliente para reaccionar

En lugar del registro de los datos en la consola nos estamos conectando el cliente al reaccionar.

necesitamos para envolver nuestro componente con el componente ApolloProvider proporcionado por el paquete apolo-alza su es similar a la del proveedor de reaccionar al contexto que permite el acceso al cliente en cualquier lugar de nuestra aplicación.

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

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")
);

Fetching los datos de los componentes de

Reaccionar Apolo nos proporciona un componente de consulta que se utiliza para recuperar los datos directamente de los componentes. componente

la consulta tarda la consulta como un puntal en el interior del componente de consulta que necesitamos para definir una función con un parámetro de modo que poder acceder al resultado de esta consulta de este parámetro que se pasa por el componente de consulta.

Un parámetro es un objeto que contiene tres propiedades de carga, error, datos.

carga: es cierto si la solicitud está todavía en proceso. error

: que contiene los datos relativos error en caso de que la solicitud ha fallado.

datos: El resultado de la consulta está disponible en esta propiedad.

Abrir el archivo app.js y añadir los datos siguientes.

import React, { Component } from "react";
import "./App.css";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const query = gql`
{
viewer {
name
email
}
}
`;

class App extends Component {
render() {
return (


{result => {
if (result.loading) return

loading...

;
if (result.error) return

{result.error.message}

;
return (

Name: {result.data.viewer.name}

Email: {result.data.viewer.email}

);
}}

);
}
}

export default App;

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

cliente

Apolo Devtools

vamos a instalar Apolo herramientas dev cliente desde la Chrome Web Store.

Una vez que ha instalado correctamente podemos acceder a la zona de juegos GraphiQL desde la pestaña devtools. Al utilizar GraphiQL patio de recreo podemos enviar consultas y las mutaciones en el servidor. Ahora

abrir sus herramientas de Chrome dev y haga clic en el Apolo pestaña, verá una GraphiQL parque infantil.

El dejó de datos secundarios en la imagen es el lado de datos de consulta y la derecha es el resultado.

Paso de argumentos a las consultas

También podemos filtrar las consultas pasando los argumentos.

crear un nuevo archivo llamado mi-repostiories.js en la carpeta src y agregue el código siguiente.

import React, { Component } from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

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

class Myrepositories extends Component {
render() {
return (

{({ data, loading, error }) => {
if (loading) return

loading...

;
if (error) return

{error.message}

;
return (

    First 10 repositories

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

  • {node.name}
  • ))}

);
}}

);
}
}

export default Myrepositories;

En el código anterior, primero se creó una reposQuery pasando un argumento en primer lugar: 10, de modo que sólo podemos conseguir primeros 10 repositorios.

el paso de argumentos que utilizan variables de consulta

Hasta el momento estamos pasando los valores estáticos a los argumentos Vamos a sustituir los valores estáticos con los valores dinámicos mediante el uso de variables de consulta.

const reposQuery = gql`

query Myrepositories($first:Int!){
viewer {
repositories(first: $first) {
edges {
node {
name
}
}
}
}
}`

la consulta nombres de las variables siempre se preceden por un carácter $.

El valor estático se sustituye por un nombre de primera variable $ de manera que podemos pasar a consulta el valor de forma dinámica mediante el uso de una primera variable $.

import React, { Component } from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const reposQuery = gql`
query Myrepositories($first: Int!) {
viewer {
repositories(first: $first) {
edges {
node {
name
}
}
}
}
}
`;
class Myrepositories extends Component {
render() {
return (

{({ data, loading, error }) => {
if (loading) return

loading...

;
if (error) return

{error.message}

;
return (

    First 10 repositories

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

  • {node.name}
  • ))}

);
}}

);
}
}
export default Myrepositories;

El componente de consulta tiene variables prop objeto que contiene la variable que queremos pasar a nuestra consulta GraphQL.

Fetch más datos

vamos a agregar un botón Cargar más dentro de nuestro componente Myrepositories que nos ayuda a buscar las morerepositories de la GitHub.

Estamos utilizando la función fecthMore proporcionada por el componente de consulta para cargar los datos más. función


{({ data, loading, error, fetchMore }) => {
if (loading) return

loading...

;
if (error) return

{error.message}

;

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

return (

    First {current}repositories

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

  • {node.name}
  • ))}

);
}}
;

El fetchMore toma el objeto con dos variables propiedades y updateQuery. las variables

: Variables El necesitamos pasar a la consulta GraphQL.

updateQuery : La función updateQuery se utiliza para combinar los datos con los nuevos datos y volver a hacer el componente con los datos actualizados. refactor de

Let el código anterior mediante la creación de un método handleMore. tiempo de

import React, { Component } from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const reposQuery = gql`
query Myrepositories($first: Int!) {
viewer {
repositories(first: $first) {
edges {
node {
name
}
}
}
}
}
`;

class Myrepositories extends Component {
handleMore = (data, fetchMore, current) => {
fetchMore({
variables: { first: current + 10 },
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return prev;
}
return Object.assign(prev, fetchMoreResult);
}
});
};

render() {
return (

{({ data, loading, error, fetchMore }) => {
if (loading) return

loading...

;
if (error) return

{error.message}

;

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

return (

    First {current} repositories

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

  • {node.name}
  • ))}

);
}}

);
}
}

export default Myrepositories;

Es a prueba hace nuestra botón Cargar más.

Código

refactorización

Si nos fijamos en el componente Myrepositories ya se hace grande por lo que primero estamos eliminando todas las consultas de la Reaccionar componentes y lugar en el archivo separado llamado queries.js.

import { gql } from 'apollo-boost'

const reposQuery = gql`

query Myrepositories($first:Int!){
viewer {
repositories(first: $first) {
edges {
node {
id
name
stargazers{
totalCount
}
viewerHasStarred
}
}
}
}
}
`
const userQuery = gql` {
viewer {
name
email
}
}`

export { reposQuery, userQuery }

Ahora podemos importar las consultas necesarias de este archivo queries.js.

Vamos a crear un nuevo archivo llamado display-repos.js y añada el siguiente código.

actualización import React from 'react';

function Displayrepos(props) {

const { current, data, refetch } = props

return (

First {current} repositories

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

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

)}

)
}

export default Displayrepos; el componente Myrepositories mediante la adición de un componente secundario Displayrepos.

import React, { Component } from "react";
import { Query } from "react-apollo";
import Displayrepos from "./display-repos";
import { reposQuery } from "./queries";

class Myrepositories extends Component {
handleMore = (data, fetchMore, current) => {
fetchMore({
variables: { first: current + 10 },
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return prev;
}
return Object.assign(prev, fetchMoreResult);
}
});
};

render() {
return (

{({ data, loading, error, fetchMore, refetch }) => {
if (loading) return

loading...

;
if (error) return

{error.message}

;

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

return (
this.handleMore(data, fetchMore, current)}
/>
);
}}

);
}
}

export default Myrepositories;

mutaciones

Para modificar los datos de graphql necesitamos enviar mutaciones en lugar de consultas porque las consultas se utilizan para obtener los datos de backend. propósito

mutaciones es añadir o eliminar o actualizar los datos que están almacenados actualmente en el backend.

mutaciones empezar con una mutación de palabras clave. Ejemplo

para la adición de una estrella a su repositorio GitHub.

mutation AddStar($repoid:ID!){
addStar(input:{starrableId:$repoid}){
starrable{
stargazers{
totalCount
}
viewerHasStarred
}
}
}

una vez que la mutación se completó devuelve la parte trasera de datos desde el servidor.

la salida desde el backend

{
"data": {
"addStar": {
"starrable": {
"stargazers": {
"totalCount": 1
},
"viewerHasStarred": true
}
}
}
}

Vamos a crear un nuevo archivo llamado addstar.js.

Ahora estamos implementando componente Addstar que nos ayuda a añadir la estrella para sus repositorios.

Reaccionar apolo paquete también se proporciona el componente de mutación que se utiliza para enviar las mutaciones a la API graphql.

En el componente de mutación, tenemos que pasar a la función que los niños también está utilizando rendir apoyos patternsame como el componente de Consultas.

El primer parámetro de la función es la función de mutar y un segundo parámetro es un objeto que contiene los datos de la backend. componente

import React, { Component } from "react";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";

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

class AddStar extends Component {
render() {
return (

{(addStar, { data, loading, error }) => {
return (

{loading &&

loading...

}
{error &&

{error.message}

}

);
}}

);
}
}

export default AddStar;

la mutación lleva las mutaciones como apoyo mutación vez la mutación addStar se terminó estamos encadenados con el método a continuación, e invocando el método refetch para que podamos ver los datos actualizados en la interfaz de usuario.

Vamos a crear un nuevo componente llamado elimina alquitrán que se utiliza para eliminar la estrella.

import React, { Component } from "react";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";

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

class RemoveStar extends Component {
render() {
return (

{(removeStar, { data, loading, error }) => {
return (


{loading &&

processing...

}
{error &&

{error.message}

}

);
}}

);
}
}

export default RemoveStar;

En el componente elimina alquitrán estamos invocando la mutación elimina alquitrán por passingthe variables de ID repositorio.

actualización del archivo de visualización-repos.js con el siguiente código.

import React from "react";
import AddStar from "./addstar";
import RemoveStar from "./removestar";

function Displayrepos(props) {
const { current, data, refetch } = props;

return (

First {current} repositories

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

  • {node.name}

    {node.viewerHasStarred ? (

    ) : (

    )}

  • stars {node.stargazers.totalCount}

))}

);
}

export default Displayrepos;

En el código anterior en primer lugar, que importó los componentes AddStar y elimina alquitrán continuación añadimos a ourcomponent para hacer condicionalmente que significa que si ya ha añadido una estrella a su repositorio, sólo dibujar el componente elimina alquitrán de otro modo que prestamos el componente AddStar. La prueba de

Vamos ahora.

¿has visto en la imagen de arriba nuestra interfaz de usuario se actualiza si añadir o eliminar una estrella?

Barra de búsqueda

The Final aplicación contiene una barra de búsqueda para buscar en los repositorios de GitHub públicas. Código

repositorio