Share
GraphQL è diventato popolare recentemente ed è probabile che sostituisca l'API Rest. In questo tutorial, utilizzeremo Apollo Client per comunicare con l'API GraphQL di GitHub. Integreremo Apollo Client con ReactJS, ma puoi usarlo anche con diverse altre piattaforme client.
Questo tutorial non tratta come avviare un progetto React, ma puoi usarlo Create-reagiscono-app per iniziare.
Una volta che l'app reattiva è pronta, la prossima cosa è installare i moduli richiesti.
La seguente riga installa tutti i moduli richiesti.
npm install apollo-client-preset react-apollo graphql-tag graphql --save
Ora possiamo fornire il nostro componente con un cliente.
È possibile fornire un client in qualsiasi punto della gerarchia dei componenti di React. Tuttavia, è sempre buona norma fornire il componente, avvolgendo l'intera applicazione, con il cliente.
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; importare App da './App'; import ApolloProvider da 'react-apollo'; importare ApolloClient da "apollo-client"; importare HttpLink da "apollo-link-http"; import InMemoryCache da 'apollo-cache-inmemory'; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', intestazioni: autorizzazione: 'Bearer $ token'; const client = new ApolloClient (link: new HttpLink (httpLink), cache: new InMemoryCache ()); ReactDOM.render (, document.getElementById ( 'radice'));
Sopra puoi vedere che abbiamo definito il uri per GitHub e anche usato un token specifico per intestazioni. Dovresti usare il tuo token generato da GitHub. Quindi non dimenticare di sostituirlo con YOUR_TOKEN.
Per questo esempio, abbiamo definito il token API sul lato client. Tuttavia, non devi rivelare pubblicamente il token dell'API. Quindi è sempre bene tenerlo sul server estratto dal lato client.
Si noti che abbiamo avvolto il ApolloProvider e usato il cliente variabile che abbiamo creato per il cliente puntello.
Prima di immergermi nelle query, voglio sottolineare che c'è uno strumento molto utile chiamato GraphiQL per testare le tue query GraphQL. Prima di procedere, assicurati di averlo scaricato.
Una volta aperto GraphiQL, è necessario impostare il Endpoint GraphQL e Intestazioni HTTP.
Endpoint GraphQL: https://api.github.com/graphql
Nome intestazione: Autorizzazione
Valore intestazione: Portatore YOUR_TOKEN
Certo, devi sostituire YOUR_TOKEN con il tuo token. Non dimenticare di includere il Portatore di fronte al tuo token quando definisci il Valore intestazione.
Se non si desidera scaricare un'applicazione, è anche possibile utilizzare l'API Explorer GraphQL online per GitHub.
A differenza di un'API REST con diversi endpoint, l'API GraphQL ha solo un endpoint e si recupera solo ciò che viene definito dalla query.
La documentazione dell'API GraphQL di GitHub offre maggiori informazioni.
Inoltre, la parte migliore dell'applicazione GraphiQL è che ti consente di accedere alla documentazione per le query direttamente all'interno dell'applicazione. Puoi vedere la barra laterale sulla destra chiamata Documenti.
Iniziamo con la query più semplice:
query viewer login
Questa query ti restituisce le informazioni di accesso del visualizzatore. In questo caso, lo spettatore sei tu da quando hai usato il tuo token API.
In questo tutorial, non fornirò informazioni dettagliate sulle query. È sempre possibile fare riferimento alla documentazione e provare le query sugli strumenti GraphQL per vedere se si stanno ottenendo i dati corretti.
Usiamo la seguente query per il resto del tutorial.
query ($ name: String!) search (query: $ name, last: 10, type: REPOSITORY) edges node ... sul repository id name description url
Questa query ricerca gli ultimi 10 repository corrispondenti alla specifica stringa di input, che definiremo nella nostra applicazione.
Restituisce il id, nome, descrizione, e url per ogni risultato.
Dobbiamo importare i due moduli seguenti nel nostro componente React per poter definire la query all'interno del componente e quindi passare i risultati al componente come oggetti di scena.
importare gql da 'graphql-tag'; importare graphql da 'react-apollo';
Qui abbiamo assegnato la nostra query a una variabile costante, ma non abbiamo definito il nome parametro ancora.
const repoQuery = gql 'query ($ name: String!) search (query: $ name, last: 10, tipo: REPOSITORY) edges node ... sul repository id name description url'
Ora avvolgiamo il nostro componente con il graphql HOC (Higher Order Component) per definire i parametri di query, eseguire la query e quindi passare il risultato come oggetti di scena al nostro componente.
const AppWithData = graphql (repoQuery, options: variables: name: "tuts") (App)
Di seguito è la versione finale del nostro componente.
import React, Component da 'react'; importare gql da 'graphql-tag'; importare graphql da 'react-apollo'; la classe App estende Component render () return (); const repoQuery = gql 'query ($ name: String!) search (query: $ name, last: 10, type: REPOSITORY) edges node ... sul repository id name description url const AppWithData = graphql (repoQuery, options: variables: name: "tuts") (App) esporta AppWithData predefinito;
Si noti che non esportiamo il reale App componente ma il componente avvolto, che è AppWithData.
Andiamo avanti e aggiungiamo console.log (this.props) al metodo di rendering del tuo componente.
classe App estende Component render () console.log (this.props) return ();
Quando controlli la console del tuo browser, vedrai che ci sono due log di oggetti.
All'interno di ogni oggetto, vedrai il dati proprietà. Questo è fornito al nostro componente attraverso il graphql HOC.
Si noti che il primo registro ha il caricamento: vero proprietà all'interno dati, e il secondo registro ha caricamento: falso e un nuovo oggetto chiamato ricerca, che sono esattamente i dati che volevamo ottenere.
Scriviamo alcuni JSX per visualizzare i dati recuperati.
Dal momento che il ricerca l'oggetto non è inizialmente lì, non possiamo provare direttamente a renderlo. Pertanto, per prima cosa dobbiamo controllare se abbiamo recuperato i dati e il ricerca l'oggetto è pronto per essere utilizzato.
Per fare ciò, useremo semplicemente il Caricamento in corso informazioni fornite all'interno del dati proprietà.
Se Caricamento in corso è vero quindi semplicemente rendiamo il Caricamento in corso testo, altrimenti i dati stessi.
la classe App estende Component render () return (this.props.data.loading === true? "Caricamento": this.props.data.search.edges.map (dati =>);)
- Data.node.name
- Data.node.description
Ho usato il ?: operatore ternario per espressioni condizionali in linea di base. Se Caricamento in corso è vero noi mostriamo Caricamento in corso,e se è falso, usiamo la funzione map per scorrere attraverso il nostro array di dati per visualizzare le informazioni all'interno di elementi.
Questo è solo un esempio di base. È possibile utilizzare un'istruzione if-else regolare e restituire risultati diversi per il metodo di rendering.
Puoi controllare il repository Apollo-Client-with-React, clonarlo sul tuo computer e giocare.
Post scriptum Non dimenticare di sostituire il gettone variabile con il proprio token API per GitHub.
Abbiamo spiegato come iniziare con Apollo Client for React. Abbiamo installato i moduli richiesti, configurato il client e quindi fornito al nostro componente nella parte superiore della gerarchia dei componenti. Abbiamo imparato a testare rapidamente le query GraphQL prima di implementarle nella nostra applicazione reale. Infine, abbiamo integrato la query in un componente React e visualizzato i dati recuperati.
Accentsconagua