GraphQL и Relay в Back4App: Обработка схем и данных

18 мин

начало работы с graphql relay введение в этом руководстве вы узнаете, что такое relay, как работать со схемой и как работать с graphql на back4app предварительные требования это еще не учебник, но чтобы вам было комфортно его читать, вам потребуется базовые знания javascript базовое понимание graphql если у вас его нет, то graphql js — это отличное место для начала relay relay — это клиент graphql, разработанный командой facebook engineering и предназначенный для производительности при создании приложений, основанных на данных более точно, relay — это фреймворк для декларативного получения и управления данными graphql на стороне клиента, который использует строгие соглашения, чтобы помочь вашему приложению добиться успеха он был создан с учетом масштабируемости для поддержки сложных приложений, таких как facebook конечная цель graphql и relay — обеспечить мгновенные взаимодействия с пользовательским интерфейсом одним из основных преимуществ использования graphql является то, что вы можете получить с помощью одного запроса все данные, необходимые для построения страницы приложения, например конечно, это хорошо (вы можете сэкономить время на запросы к серверу), но с этим возникает проблема вы можете использовать разные запросы для одного и того же компонента, когда повторно используете этот компонент в разных частях вашего приложения чтобы избежать этой проблемы, relay использует важную концепцию колокацию колокация при использовании relay компоненты и их требования к данным находятся вместе требования к данным компонентов объявляются внутри них это означает, что все компоненты объявляют данные, которые им нужны relay гарантирует, что каждый компонент имеет необходимые данные во время рендеринга структура relay, лежащая в основе концепции колокации, — это контейнеры наиболее распространенным является контейнер фрагмента relay контейнер — это компонент, который пытается удовлетворить требования к данным при рендеринге каждого компонента контейнеры объявляют свою зависимость от данных, используя фрагменты graphql каждый компонент будет иметь свой собственный контейнер фрагмента контейнер не получает данные напрямую; он только объявляет спецификацию для данных, необходимых при рендеринге данные будут получены на стороне сервера relay позаботится о том, чтобы данные были доступны до начала рендеринга relay компилирует дерево данных с этими контейнерами, игнорируя избыточности, и получает данные на сервере давайте проиллюстрируем концепцию на примере фрагмент — это выбор полей в типе graphql relay работает с фрагментами, контейнерами для пагинации и повторного запроса наиболее распространенным является контейнер фрагмента ниже приведен фрагмент в graphql и затем тот же самый в relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4	 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12	 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20	 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); в первом коде вы можете увидеть версию graphql, которая позволяет нам разбивать этот запрос на переиспользуемые фрагменты в следующем коде вы можете увидеть версию relay, которая показывает фрагменты и данные вместе в одном компоненте совместное размещение означает, что определения данных и определения представления живут вместе совместное размещение имеет некоторые преимущества нам нужно просто точно объявить дату, которая нам нужна это означает, что трудно получить избыточные данные, что улучшает наше приложение, и трудно недополучить данные, что предотвращает ошибки с отсутствующими данными еще одно важное понятие это маскирование данных, что означает, что компоненты могут получать доступ только к данным, которые они запрашивали маскирование данных помогает предотвратить ошибки зависимости кроме того, компоненты обновляются только в том случае, если данные, которые они используют, изменяются современный рендерер запросов мы рекомендуем ознакомиться с официальной документацией по рендереру запросов https //relay dev/docs/en/query renderer html#docsnav для лучшего понимания на основе контейнеров фрагментов relay будет их читать и делать запрос к серверу на основе имеющихся данных но как происходит этот запрос? здесь и вступает в дело современный рендерер запросов современный рендерер запросов это компонент, который читает контейнеры фрагментов, делает запрос к серверу и возвращает данные в компонент каждый корневой компонент будет иметь современный рендерер запросов, выполняющий этот запрос в приведенном выше примере у нас есть абстракция, чтобы мы передали только фрагмент, который должен быть прочитан, и вся остальная работа выполняется внутри createqueryrenderermodern на следующем этапе документа мы введем createqueryrenderermodern, чтобы понять абстракцию на основе чистого примера выше ниже приведен чистый пример query render modern 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } мы можем видеть, что query renderer modern является hoc компонент другими словами, оберните компонент, который владеет контейнером с данными, которые нужно запросить, сделайте запрос с помощью среды relay и передайте данные вниз, передавая их компоненту автоматическая генерация типов работая с relay, мы можем строить приложение безопасно с точки зрения типов как мы уже говорили, каждый компонент будет владельцем своих данных поэтому, когда мы запускаем relay compiler, он читает каждый фрагмент данных и проверяет его с вашей схемой graphql если все проверки компилятора relay проходят успешно, типы будут сгенерированы в папке, называемой generated эта папка создается внутри корневых папок компонентов смотрите пример ниже компонент домашней проверки состояния api 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8	 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16	 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); сгенерированная папка, содержащая типы для компонента home и сгенерированные типы после этого нам просто нужно импортировать тип в компонент и составить его 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; тип генерируется в flow, основном языке для типов от facebook но с помощью библиотеки вы можете генерировать в typescript это наиболее распространено для работы с react native подводя итог, с помощью компилятора relay мы можем проверить реализацию данных до времени выполнения это помогает нам предотвратить ошибки и улучшить качество приложения и время разработки в запросах мы можем избежать дублирования данных в n различных компонентах он проверяет, есть ли дублирующиеся данные если есть, он удалит избыточности это уменьшит размер полезной нагрузки запросов и еще больше повысит производительность приложения разработка в запросах мы можем избежать дублирования данных в n различных компонентах он проверяет, есть ли дублирующиеся данные если есть, он удалит избыточности это уменьшит размер полезной нагрузки запросов и еще больше повысит производительность приложения на стороне сервера back4app back4app генерирует готовый к использованию api graphql, совместимый с relay, для использования в вашем проекте что генерирует back4app для вас, чтобы вам не пришлось строить это самостоятельно на стороне сервера инфраструктура на панели управления back4app вы можете создать полную модель данных с классами, типами и всем остальным, что нужно базе данных вам не нужно беспокоиться о настройке и обслуживании сервера самостоятельно после создания вашей модели данных back4app мы сгенерируем все, что необходимо для ее использования на стороне фронтенда с помощью graphql давайте взглянем на схему api graphql схема файл схемы является основой любого приложения graphql он описывает весь сервер, доступный для использования на стороне клиента relay работает, используя ваш файл схемы для подтверждения строк запросов и сгенерированного файла, который появляется в / сгенерированный /mycomponent graphql, как мы говорили в теме автоматическая генерация типов чтобы использовать компилятор relay, вам нужен либо файл схемы graphql с расширением graphql, либо json, описывающий api вашего сервера graphql эти файлы являются локальными представлениями источника правды сервера и не редактируются каждая схема graphql может состоять из типа запроса, типа мутации и типа подписки чтобы работать со схемой, используемой relay на фронтенде, вам нужны некоторые основные концепции на бэкенде интерфейс узла и соединение мы рекомендуем прочитать о интерфейсе узла и соединениях relay, чтобы сделать это чтение более легким для абстракции интерфейсы узлов интерфейс узла реализует каждый тип в graphql, чтобы помочь извлекать данные по id это реализация, чтобы упростить извлечение данных с сервера и их обновление таким образом, каждая запись каждого типа будет иметь уникальный id, называемый глобальным уникальным id, реализуемым через интерфейс узла с помощью узла relay избегает вложенных запросов и осуществляет извлечение и повторное извлечение данных с его помощью это сложно реализовать и требует немного работы, но мы уже сделали это для вас! пагинация создано для компоновки, как на фронтенде, так и на бэкенде, relay поможет нам также компонировать наши данные для работы с пагинацией у нас есть соединения эти соединения реализуют узел из типа, который мы извлекаем, и имеют стандартную модель, упрощая реализацию пагинации на стороне сервера к счастью, снова, у нас это уже построено для использования на фронтенде заключение в этом руководстве мы представили, что такое relay, его основные концепции и как он работает также мы увидели, как back4app автоматизирует создание сервера graphql и предоставляет нам полную базу данных с api graphql для работы подводя итог, весь бэкенд уже построен back4app вам нужно только создать свои типы на панели управления и начать использовать сгенерированную схему в следующем разделе мы объясним, как работать с этой схемой на фронтенде и как подготовить вашу среду для использования relay у нас также есть кулинарная книга graphql https //www back4app com/docs/parse graphql/graphql getting started , вы можете использовать ее, чтобы помочь вам лучше понять концепции на нашей панели управления