GraphQL — реактивная интеграция

React — это библиотека Javascript для создания пользовательских интерфейсов. В этой главе объясняется, как можно интегрировать GraphQL с приложением React.

иллюстрация

Самый быстрый способ настроить реагирующий проект — использовать инструмент Создать приложение React . В последующих разделах мы узнаем, как настроить как Сервер, так и Клиент.

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

Для настройки Сервера выполните следующие действия:

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

Создайте папку реакции-сервер-приложение . Измените ваш каталог на имя -сервер-приложение с терминала. Выполните шаги с 3 по 5, описанные в главе «Настройка среды».

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

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

type Query
{
   greeting: String
   sayHello(name:String!):String
}

В файле определены два запроса — приветствие и sayHello. Запрос sayHello принимает строковый параметр и возвращает другую строку. Параметр функции sayHello () не является нулевым.

Шаг 3 — Создание резольверов

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

const Query =
{
   greeting: () => 'Hello GraphQL  From TutorialsPoint !!' ,
   sayHello🙁root,args,context,info) =>  `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}

Здесь приветствие и сказать Привет два решателя. В резольвере sayHello к значению, передаваемому параметру name, можно получить доступ через аргументы. Чтобы получить доступ к функциям распознавателя вне модуля, объект Query должен быть экспортирован с помощью module.exports.

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

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

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

{
   greeting,
   sayHello(name:"Mohtashim")
}

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

{
   "data": {
      "greeting": "Hello GraphQL  From TutorialsPoint !!",
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

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

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

Шаг 1 — Создать проект React hello-world-client

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

npx create-react-app hello-world-client

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

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

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

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

Шаг 3 — Изменить компонент приложения

В App.js внутри папки src добавьте две функции, одну для загрузки приветствия и другую для загрузки сообщений sayHello.

Далее следует функция loadGreeting, которая отправляет запрос GraphQL для приветствия.

async function loadGreeting() {
   const response = await fetch('http://localhost:9000/graphql', {
      method:'POST',

      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:'{greeting}'})
   })

   const rsponseBody = await response.json();
   return rsponseBody.data.greeting;

   console.log("end of function")
}

Ниже приводится функция loadSayhello, которая отправляет запрос GraphQL для sayHello.

async function  loadSayhello(name) {
   const response = await fetch('http://localhost:9000/graphql', {
      method:'POST',
      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:`{sayHello(name:"${name}")}`})
   })
}

Полный файл App.js показан ниже —

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

async function loadGreeting() {
   const response =  await fetch('http://localhost:9000/graphql', {
      method:'POST',
      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:'{greeting}'})
   })
   const rsponseBody =  await response.json();
   return rsponseBody.data.greeting;
   console.log("end of function")
}

async function  loadSayhello(name) {
   const response =  await fetch('http://localhost:9000/graphql', {
      method:'POST',
      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:`{sayHello(name:"${name}")}`})
   })
   const rsponseBody =  await response.json();
   return rsponseBody.data.sayHello;
}

class App extends Component {
   constructor(props) {
      super(props);
      this.state =  {greetingMessage:'',sayHelloMessage:'',userName:''}
      this.updateName =  this.updateName.bind(this);
      this.showSayHelloMessage =  this.showSayHelloMessage.bind(this);
      this.showGreeting =  this.showGreeting.bind(this);
   }
   
   showGreeting() {
      loadGreeting().then(g => this.setState({greetingMessage:g+" :-)"}))
   }
   
   showSayHelloMessage() {
      const name = this.state.userName;
      console.log(name)
      loadSayhello(name).then(m => this.setState({sayHelloMessage:m}))
   }
   
   updateName(event) {
      this.setState({userName:event.target.value})
   }
   render() {
      return (
         <div className = "App">
            <header className = "App-header">
               <img src = {logo} className = "App-logo" alt = "logo" />
               <h1 className = "App-title">Welcome to React</h1>
            </header>
            <br/><br/>
            <section>
               <button id = "btnGreet" onClick = {this.showGreeting}>Greet</button>
               <br/> <br/>
               <div id = "greetingDiv">
                  <h1>{this.state.greetingMessage}</h1>
               </div>
            </section>
            
            <hr/>
            
            <section>
               Enter a name:<input id = "txtName" type = "text" onChange = {this.updateName}
               value = {this.state.userName}/>
               <button id = "btnSayhello" onClick = {this.showSayHelloMessage}>SayHello</button>
               <br/>
               user name is:{this.state.userName}    <br/>
               <div id = "SayhelloDiv">
                  <h1>{this.state.sayHelloMessage}</h1>
               </div>
            </section>
         </div>
      );
   }
}

export default App;

После запуска обоих приложений нажмите кнопку приветствия. Затем введите имя в текстовое поле и нажмите кнопку «Скажи привет». Выход будет как указано ниже —