Учебники

GraphQL — клиент Apollo

Январь 27, 2019

Мы использовали Apollo Server для построения спецификации graphql на стороне сервера. Быстро и легко построить готовый к работе сервер GraphQL. Теперь позвольте нам понять сторону клиента.

Apollo Client — лучший способ использовать GraphQL для создания клиентских приложений. Клиент разработан, чтобы помочь разработчику быстро создать пользовательский интерфейс, который извлекает данные с помощью GraphQL и может использоваться с любым интерфейсом JavaScript.

Apollo Client поддерживает следующие платформы —

Sr.No. Платформа и фреймворк
1

Javascript

Реагировать, Угловой, Вьет, Метеор, Ember

2

веб-компоненты

Полимер, лит-аполлон

3

Родной мобильный

Родной Android с Java, Родной iOS с Swift

Javascript

Реагировать, Угловой, Вьет, Метеор, Ember

веб-компоненты

Полимер, лит-аполлон

Родной мобильный

Родной Android с Java, Родной iOS с Swift

Кэширование является одной из основных функций Apollo Client. apollo-boost — это удобный пакет, который включает в себя множество других зависимостей.

иллюстрация

Давайте посмотрим, как использовать клиент Apollo для создания клиентских приложений, выполнив следующие шаги:

Настройка сервера

Мы должны выполнить следующие шаги для настройки сервера —

Шаг 1 — Загрузите и установите необходимые зависимости для проекта

Создайте папку apollo-server-app. Измените свой каталог на apollo-server-app из терминала. Затем выполните шаги 3–5, описанные в главе «Настройка среды».

Шаг 2 — Создание схемы

Добавьте файл schema.graphql в папку проекта apollo-server-app и добавьте следующий код — 

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 — Добавить резольверы

Создайте файл resolvers.js в папке проекта и добавьте следующий код — 

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}

Шаг 4 — Запустите приложение

Создайте файл server.js . См. Шаг 8 в главе «Настройка среды». Выполните команду npm start в терминале. Сервер будет работать на 9000 портов. Здесь мы будем использовать GraphiQL в качестве клиента для тестирования приложения.

Откройте браузер и введите URL-адрес http: // localhost: 9000 / graphiql . Введите следующий запрос в редакторе. 

{
   students{
      id
      firstName
      college{
         name
      }
   }
}

Ответ на запрос приведен ниже. 

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

Настройка клиента

Откройте новый терминал для клиента. Терминал сервера должен быть запущен до выполнения клиентского приложения. Приложение React будет работать на порту с номером 3000, а приложение сервера — на порту с номером 9000.

Шаг 1 — Создание приложения React

В клиентском терминале введите следующую команду — 

npx create-react-app hello-world-client

Это установит все необходимое для типичного приложения реакции. Утилита npx и инструмент create-реагировать на приложение создают проект с именем hello-world-client . После завершения установки откройте проект в VSCode.

Шаг 2 — Запустите hello-world-client

Измените текущий путь к папке в терминале на hello-world-client . Наберите npm start, чтобы запустить проект. Это запустит сервер разработки на порту 3000 и автоматически откроет браузер и загрузит страницу индекса.

Это показано на скриншоте ниже.

Создание Ract Project.jpg

Шаг 3 — Установите клиентские библиотеки Apollo

Чтобы установить клиент Apollo, откройте новый терминал и укажите путь к папке текущего проекта. Введите следующую команду — 

npm install apollo-boost graphql

Это загрузит библиотеки graphql для клиентской части, а также пакет Apollo Boost. Мы можем перепроверить это, набрав npm view в зависимостях apollo-boost. Это будет иметь много зависимостей, как показано ниже — 

{
   '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 установлена.

Шаг 4. Изменение компонента приложения в файле index.js

С клиентом Apollo мы можем напрямую вызывать сервер без использования API извлечения. Кроме того, запросы и мутации не должны быть встроены в строку с обратным тиковым обозначением. Это потому, что функция gql непосредственно анализирует запросы. Это означает, что программист может напрямую писать запросы одинаково при написании запросов в инструменте GraphiQL. gql — это функция тега, которая будет анализировать строку шаблона, записанную в нотации обратного тика, в объект запроса graphql. Метод запроса клиента Apollo возвращает обещание.

Следующий фрагмент кода показывает, как импортировать Apollo Client — 

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()
});

В предыдущей главе мы обсуждали, как использовать API выборки для HTTP-запросов. Следующий код показывает, как использовать функцию gql . Функция loadStudentsAsync использует клиент Graphql для запроса к серверу. 

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

Вам нужно только сохранить index.js в папке src и index.html в общей папке; все остальные файлы, которые создаются автоматически, могут быть удалены.

Структура каталогов приведена ниже — 

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

Ниже приводится index.js в приложении реагировать — 

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

Приложение реагирования будет загружать студентов с сервера GraphQL, как только мы нажмем кнопку loadStudents, как показано ниже —

54
Share: