Полный стек React + GraphQL Tutorial

Часть 1. Внешний интерфейс: декларативный запрос и имитация данных с помощью Apollo

GraphQLэто новое определение API и язык запросов,Потенциал стать новым REST. Это позволяет компонентам пользовательского интерфейса легко извлекать данные декларативно, не сосредотачиваясь на деталях реализации серверной части. GraphQL — это мощная абстракция, которая может ускорить разработку приложений и упростить поддержку кода.

Однако, несмотря на множество преимуществ использования GraphQL, сделать первый шаг может быть непросто. Вот почему я написал эту серию руководств, которые помогут вам шаг за шагом написать GraphQL иApollo Clientполнофункциональное приложение React. В этой серии статей вы узнаете, как создать приложение для обмена мгновенными сообщениями с использованием GraphQL:

Часть 1 (эта статья): Настройка простого клиента
Часть 2: Настройка простого сервера
Часть 3. Внесение изменений и синхронизация клиентов
Часть 4. Активный пользовательский интерфейс и обновления клиентского хранилища
Часть 5: Тип входного буфера и пользовательский преобразователь
Часть 6: Подписка на стороне сервера
Часть 7: Подписки GraphQL на стороне клиента

Это руководство — первое в этой серии — о том, как начать работу с GraphQL во внешнем интерфейсе. Это займет всего около 20-30 минут, и вы получите очень простой пользовательский интерфейс React, который использует GraphQL для загрузки данных и выглядит следующим образом:

Простой пользовательский интерфейс React для загрузки данных с использованием GraphQL.

Давайте начнем!

1. Строительство окружающей среды

Примечание. Чтобы выполнить это руководство, на вашем компьютере должны быть установлены node, npm и git, а также иметь некоторые знания о React.

Мы будем использовать в этом урокеcreate-react-app, поэтому выполните установку:

> npm install -g create-react-app

Нам также потребуется клонировать кодовую базу руководства из GitHub, которая содержит CSS и изображения, которые мы будем использовать позже.

> git clone https://github.com/apollographql/graphql-tutorial.git
> cd graphql-tutorial

Далее мы используемcreate-react-appСоздайте наше реагирующее приложение.

> create-react-app client
> cd client

Чтобы убедиться, что он работает, запускаем сервер:

> npm start

Если все прошло хорошо, теперь вы должны увидеть что-то вроде этого в своем браузере:

2. Напишите первый компонент

Поскольку мы создаем приложение с помощью Apollo, мы начинаем../ resourcesкопироватьlogo.svgа такжеApp.cssизменить логотип и CSS.

> cd src
> cp ../../resources/* .

Чтобы упростить начальное руководство, сегодня мы создадим простое представление списка. давайте изменимApp.jsкод в:

Измените «Добро пожаловать в React» на «Добро пожаловать в Аполлон». Apollo — это имя клиента GraphQL, который мы будем использовать в этой серии руководств.
Удалите абзац «Для начала…» и замените его чистым компонентом React, который будет отображать两个列表项Неупорядоченный список «Канал 1» и «Канал 2» (да, вы уже догадались, мы собираемся создать приложение для общения!). Мы назвали компонент списка какChannelsList.

теперь твойApp.jsЭто должно выглядеть так:

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

const ChannelsList = () =>
     (<ul>
       <li>Channel 1</li>
       <li>Channel 2</li>
     </ul>);

class App extends Component {
   render() {
     return (
       <div className="App">
         <div className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h2>Welcome to Apollo</h2>
         </div>
         <ChannelsList />
       </div>
     );
   }
 }

export default App;

create-react-appГорячая перезагрузка настроена для вас, поэтому после сохранения файла окно браузера, в котором находится ваше приложение, обновится, чтобы отразить изменения:

Если это выглядит так, ваши настройки верны.

3. Напишите свою схему GraphQL

Теперь, когда у нас запущено простое приложение, пришло время написать для него определение типа GraphQL. Схема укажет, какие типы объектов существуют в нашем приложении и какие поля у них есть. Кроме того, он указывает точку входа для нашего API. Мы создаем новыйschema.jsдокумент:

export const typeDefs = `

type Channel {
   id: ID!                # "!" 为必填
   name: String
}

# 此类型指定了我们的 API 的入口点。在本例中，只有一个——"channels"——返回频道列表。
type Query {
   channels: [Channel]    # "[]" 意味着这是频道列表
}
`;

С помощью этой схемы мы можем написать простой запрос в следующем разделе, чтобы получить нашуChannelListданные компонентов. Вот наш запрос:

query ChannelsListQuery {
  channels {
    id
    name
  }
}

4. Подключите свои компоненты к запросам GraphQL

Хорошо, теперь, когда у нас есть схема и запрос, нам просто нужно использоватьApollo ClientСоедините наши компоненты! Давайте установим Apollo Client и несколько вспомогательных пакетов, нам нужно добавить GraphQL в наше приложение:

> npm i -S react-apollo

react-apolloпредставляет собой интеграцию Apollo Client с React, которая позволяет вам использоватьgraphqlизкомпоненты более высокого порядкадля украшения компонента, который легко импортирует ваши данные GraphQL в компонент. React Apollo также предоставляетApolloClient,это Ядро Apollo обрабатывает все выборки данных, кэширование и агрессивное обновление (которые мы обсудим в другом руководстве).

Теперь мыApp.jsДобавьте некоторые импорт в верхней части и создайте экземпляр клиента APOLLO:

import {
  ApolloClient,
  gql,
  graphql,
  ApolloProvider,
} from 'react-apollo';

const client = new ApolloClient();

Затем мы используем GraphQL HOC для оформления исходного кода.ChannelsList, который принимает запрос и передает данные нашему компоненту:

const channelsListQuery = gql`
   query ChannelsListQuery {
     channels {
       id
       name
     }
   }
 `;

const ChannelsListWithData = graphql(channelsListQuery)(ChannelsList);

когда нашChannelsListИспользование компонентовgraphqlКогда HOC упакован, он получитdataprop, когда он доступен, будет содержатьchannelКогда есть ошибка, она будет отображаться.error. Кроме тогоdataтакже содержитloadingСвойство, значение которого равно тому, когда клиент Apollo ожидает выборки данных.true.

Далее измените нашChannelsListкомпонент, чтобы убедиться, что пользователь знает, загружается ли компонент или есть ли ошибка:

const ChannelsList = ({ data: {loading, error, channels }}) => {
   if (loading) {
     return <p>Loading ...</p>;
   }
   if (error) {
     return <p>{error.message}</p>;
   }

   return <ul>
     { channels.map( ch => <li key={ch.id}>{ch.name}</li> ) }
   </ul>;
 };

Наконец, мы используемChannelsListWithDataЗамените функцию рендеринга приложения наChannelsList. Чтобы позволить только что созданному компоненту использовать экземпляр Apollo Client, мы обертываем компонент приложения верхнего уровня с помощью ApolloProvider, который помещает экземпляр Apollo Client в пользовательский интерфейс.

теперь твойAppКомпонент должен выглядеть так:

class App extends Component {
   render() {
     return (
       <ApolloProvider client={client}>
         <div className="App">
           <div className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <h2>Welcome to Apollo</h2>
           </div>
           <ChannelsListWithData />
         </div>
       </ApolloProvider>
     );
   }
 }

Хорошо, мы почти закончили! Если вы попытаетесь запустить сейчас, вы должны увидеть следующую ошибку:

Это сработало! — Ну, хотя бы отчасти.

Как это происходит? Хотя у нас все компоненты подключены правильно, мы еще не написали сервер, поэтому, конечно же, нет данных для выборки или отображения! Если вы не укажете URL-адрес конечной точки GraphQL, клиент Apollo будет считать, что он работает в том же домене./graphql. Итак, нам нужно создать веб-интерфейс с настраиваемым URL-адресом.

Однако, поскольку это руководство не посвящено написанию сервера, мы воспользуемся функцией GraphQL «код как документ», чтобы автоматически создавать макеты на основе определений типов, которые мы написали ранее. Для этого нам просто нужно остановить сервер, установить дополнительные пакеты и перезапустить его:

npm i -S graphql-tools apollo-test-utils graphql

Мы будем использовать эти пакеты для создания имитации сетевого интерфейса для клиента Apollo на основе схемы, которую мы написали ранее. Добавьте следующие импорты и определения вApp.jsвершина:

import { 
  makeExecutableSchema,
  addMockFunctionsToSchema
} from 'graphql-tools';
 import { mockNetworkInterfaceWithSchema } from 'apollo-test-utils';
 import { typeDefs } from './schema';

const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });

const mockNetworkInterface = mockNetworkInterfaceWithSchema({ schema });

Теперь нужно просто поставитьmockNetworkInterfaceПередано конструктору Apollo Client:

const client = new ApolloClient({
   networkInterface: mockNetworkInterface,
 });

Готово! Теперь ваш экран должен выглядеть так:

Мы сделали это, наше первое приложение React + GraphQL с использованием Apollo!

Примечание. «Hello World» — это просто фиктивный текст по умолчанию для строки. Если вы хотите настроить крутые макеты,Пожалуйста, ознакомьтесь с этой статьей, которую я написал ранее.

Если какой-то код не работает, и вы не можете понять почему, вы можете комбинировать его сэтот файлСравните с точечными кодовыми различиями. Кроме того, вы можете просмотретьt1-end Гит-филиалЧтобы проверить код.

Поздравляем, вы официально завершили первую часть туториала! Может показаться, что это не так уж и много, но на самом деле многое было сделано: вы написали схему GraphQL, сгенерировали из нее фиктивные данные и соединили запросы GraphQL с компонентами React. В оставшейся части этого руководства вы познакомитесь с основами, с помощью которых мы создаем настоящее коммуникационное приложение. существуетчасть 2, мы напишем простой сервер и подключим его к нашему приложению!