GraphQL - Apollo İstemcisi

Apollo Server'ı sunucu tarafında graphql belirtimi oluşturmak için kullandık. Üretime hazır GraphQL sunucusu oluşturmak hızlı ve kolaydır. Şimdi müşteri tarafını anlayalım.

Apollo Client, istemci uygulamaları oluşturmak için GraphQL kullanmanın en iyi yoludur. İstemci, geliştiricinin GraphQL ile verileri alan ve herhangi bir JavaScript ön ucuyla kullanılabilen bir kullanıcı arabirimini hızlı bir şekilde oluşturmasına yardımcı olmak için tasarlanmıştır.

Apollo Client şu platformları destekler -

Sr.No.	Platform ve Çerçeve
1	Javascript Tepki, Açısal, Vue, Meteor, Kor
2	WebComponents Polimer, lit-apollo
3	Native Mobile Java ile Yerel Android, Swift ile Yerel iOS

Önbelleğe alma, Apollo İstemcisinin en önemli özelliklerinden biridir. apollo-boost, bir dizi başka bağımlılığı da beraberinde getiren bir kolaylık paketidir.

İllüstrasyon

Aşağıdaki adımları kullanarak istemci uygulamaları oluşturmak için Apollo Client'ı nasıl kullanacağımızı görelim -

Sunucuyu Kurmak

Bir sunucu kurmak için aşağıdaki adımları izlemeliyiz -

Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin

Bir apollo-server-app klasörü oluşturun. Dizininizi şu şekilde değiştirin: apollo-server-app terminalden. Ardından, Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.

Adım 2 - Şema Oluşturun

Ekle schema.graphql proje klasöründeki dosya apollo-server-app ve aşağıdaki kodu ekleyin -

type Query
{
   students:[Student]
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   college:College
}

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

3. Adım - Çözücü Ekleme

Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -

const db = require('./db')

const Query = {
   //resolver function for students returns list
   students:() => db.students.list(),
}

const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

Adım 4 - Uygulamayı Çalıştırın

Oluşturmak server.jsdosya. Ortam Kurulum Bölümündeki 8. adıma bakın.  Terminalde npm start komutunu yürütün  . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanacağız.

Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın.

{
   students{
      id
      firstName
      college{
         name
      }
   }
}

Sorgunun cevabı aşağıda verildiği gibidir -

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "firstName": "Mohtashim",
            "college": {
               "name": "CUSAT"
            }
         },
         
         {
            "id": "S1002",
            "firstName": "Kannan",
            "college": {
               "name": "AMU"
            }
         },
         
         {
            "id": "S1003",
            "firstName": "Kiran",
            "college": {
               "name": "AMU"
            }
         }
      ]
   }
}

İstemciyi Kurmak

İstemci için yeni bir terminal açın. İstemci uygulaması çalıştırılmadan önce sunucu terminali çalışır durumda tutulmalıdır. React uygulaması 3000 numaralı bağlantı noktasında ve sunucu uygulaması 9000 numaralı bağlantı noktasında çalışacaktır.

Adım 1 - Bir React Uygulaması Oluşturun

İstemci terminalinde aşağıdaki komutu yazın -

npx create-react-app hello-world-client

Bu, tipik bir tepki uygulaması için gereken her şeyi kuracaktır. Npx yardımcı programı ve create-react-app aracı, adla bir proje oluştururhello-world-client. Kurulum tamamlandıktan sonra projeyi VSCode'da açın.

Adım 2 - Hello-world-client'ı başlatın

Terminaldeki mevcut klasör yolunu şu şekilde değiştirin: hello-world-client. Projeyi başlatmak için npm start yazın. Bu, 3000 numaralı bağlantı noktasında bir geliştirme sunucusu çalıştıracak ve tarayıcıyı otomatik olarak açacak ve dizin sayfasını yükleyecektir.

Bu, aşağıda verilen ekran görüntüsünde gösterilmektedir -

Adım 3 - Apollo İstemci Kitaplıklarını Kurun

Bir Apollo İstemcisi kurmak için yeni bir terminal açın ve mevcut proje klasörü yolunda olun. Aşağıdaki komutu yazın -

npm install apollo-boost graphql

Bu, istemci tarafı için graphql kitaplıklarını ve ayrıca Apollo Boost paketini indirecektir. Apollo-boost bağımlılıklarında npm görünümü yazarak bunu kontrol edebiliriz. Bu, aşağıda gösterildiği gibi birçok bağımlılığa sahip olacaktır -

{
   'apollo-cache': '^1.1.15',
   'apollo-cache-inmemory': '^1.2.8',
   'apollo-client': '^2.4.0',
   'apollo-link': '^1.0.6',
   'apollo-link-error': '^1.0.3',
   'apollo-link-http': '^1.3.1',
   'apollo-link-state': '^0.4.0',
   'graphql-tag': '^2.4.2'
}

Apollo-Client kütüphanesinin kurulu olduğunu açıkça görebiliyoruz.

Adım 4 - index.js Dosyasındaki Uygulama Bileşenini Değiştirin

Apollo Client ile, getirme API'sini kullanmadan doğrudan sunucuyu arayabiliriz. Ayrıca, sorgular ve mutasyonlar geri tik gösterimi ile yapılmış bir dizgeye gömülmemelidir. Bunun nedeni,gqlişlevi doğrudan sorguları ayrıştırır. Bu, bir programcının GraphiQL aracında sorgu yazarken aynı şekilde doğrudan sorgu yazabileceği anlamına gelir. gql geri tik gösterimi ile yazılmış şablon dizgesini graphql sorgu nesnesine ayrıştıran bir etiket işlevidir. Apollo Client sorgu yöntemi bir söz verir.

Aşağıdaki kod parçacığı, Apollo İstemcisinin nasıl içe aktarılacağını gösterir -

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

Önceki bölümde, HTTP istekleri için getirme API'sinin nasıl kullanılacağını tartışmıştık. Aşağıdaki kod nasıl kullanılacağını gösterirgqlişlevi. loadStudentsAsync işlevi, sunucuyu sorgulamak için graphql istemcisini kullanır.

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }`
   const {data} = await client.query({query}) ;
   return data.students;
}

Sadece tutman gerekiyor index.js içinde srcortak klasörde klasör ve index.html; otomatik oluşturulan diğer tüm dosyalar kaldırılabilir.

Dizin yapısı aşağıda verilmiştir -

hello-world-client /
   -->node_modules
   -->public
         index.html
   -->src
         index.js
   -->package.json

Aşağıdaki index.js tepki uygulamasında -

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

// apollo client

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }
   `
   const {data} = await client.query({query}) ;
   return data.students;
}
class  App  extends Component {
   constructor(props) {
      super(props);
      this.state = {
         students:[]
      }
      this.studentTemplate =  [];
   }
   async loadStudents() {
      const studentData =  await loadStudentsAsync();
      this.setState({
         students: studentData
      })
      console.log("loadStudents")
   }
   render() {
      return(
         <div>
            <input type = "button"  value = "loadStudents" onClick = {this.loadStudents.bind(this)}/>
            <div>
               <br/>
               <hr/>
               <table border = "3">
                  <thead>
                     <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>college Name</td>
                     </tr>
                  </thead>
                  
                  <tbody>
                     {
                        this.state.students.map(s => {
                           return (
                              <tr key = {s.id}>
                                 <td>
                                    {s.firstName}
                                 </td>
                                 <td>
                                    {s.lastName}
                                 </td>
                                 <td>
                                    {s.college.name}
                                 </td>
                              </tr>
                           )
                        })
                     }
                  </tbody>
               </table>
            </div>
         </div>
      )
   }
}
ReactDOM.render(<App/>, document.getElementById('root'));

React uygulaması, aşağıda gösterildiği gibi loadStudents düğmesine tıkladığımızda, öğrencileri GraphQL sunucusundan yükleyecektir -