React Native: Установка и конфигурация Relay с GraphQL

настройка relay введение в нашем предыдущем руководстве мы узнали, как получить файл схемы, сохранить его и вставить в наше приложение react native в этом руководстве мы установим relay и подготовим нашу среду для начала разработки приложения react native цель для настройки relay нам сначала нужно установить relay в наше приложение react native, а затем подготовить среду relay предварительные требования мы рекомендуем базовое понимание следующих тем relay modern , babel js , javascript (ecs5 и ecs6), graphql js readme базовый проект react native, работающий в вашей локальной среде файл schema graphql, загруженный в ваш проект react native в следующих шагах вы найдете базовую установку relay, сосредоточенную на приложении react native если вы хотите углубиться в эту тему, пожалуйста, посетите официальную документацию 1 установка официального api react relay давайте начнем с установки официальной библиотеки react relay эта библиотека является официальным api команды relay core и содержит все необходимое для создания фрагментов данных важно установить relay modern для этого учебника с версией 10 0 0 начиная с версии 11 0 0 подход к использованию react relay изменился из за новых хуков 2 конфигурация relay конфигурация relay содержит информацию, необходимую для компилятора relay внутри мы укажем, где компилятор relay может найти файл схемы, какие папки следует просматривать и другие настройки сначала давайте установим пакет relay config примечание этот учебник использует yarn в качестве клиента пакетов, но вы можете использовать npm в любом случае теперь давайте создадим файл конфигурации relay, где relay найдет путь к схеме создайте новый файл в корне приложения назовите его relay config js откройте файл и сохраните его с информацией ниже 3 плагин relay babel чтобы конвертировать артефакты graphql во время выполнения, нам нужно установить плагин babel теперь в вашем файле конфигурации babel вы должны добавить в массив плагинов плагин relay babel финальный babel config js будет выглядеть так в проектах expo следуйте тому же подходу, добавляя массив плагинов внутри babel config js сразу после массива presets финальный результат должен выглядеть так 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; плагин relay должен выполняться перед другими плагинами для правильной трансформации артефактов graphql ознакомьтесь с документацией плагина babel, чтобы узнать больше 4 компилятор relay с момента нашей первой документации мы объясняли о компиляторе relay чтобы наше приложение компилировало наши фрагменты данных, мы установим его сейчас давайте откроем наш package json и настроим новую команду скрипта для запуска компилятора relay watchman отвечает за настройку того, должен ли компилятор relay следить за изменениями во фрагментах relay если да, он будет перезапускаться при каждом изменении если нет, он будет запускаться после того, как вы запустите yarn relay самостоятельно файл package json должен выглядеть так 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 запустите yarn relay наконец, после завершения шагов установки, мы можем запустить команду yarn relay в корне приложения поскольку мы не создаем никаких фрагментов данных, компилятор relay возвращает любой измененный файл отлично, ваше приложение уже имеет установленный и настроенный relay теперь давайте реализуем нашу среду, чтобы начать делать запросы к серверу back4app 6 подготовка среды получения данных среда relay определяет, как сетевой уровень будет обрабатывать запросы и как должен работать relay store store контролирует наши данные на фронтенде, обновляя их только при изменении и кэшируя их простая среда будет нуждаться как минимум в сетевом уровне, так и в store сетевой уровень сетевой уровень легко построить он будет обрабатывать каждый запрос нашего приложения, выполняя запросы, мутации и подписки (если ваше приложение это поддерживает) используя его, relay будет знать, как подготовить вызовы для доступа к серверу приложения relay store хранилище отвечает за обновление данных нашего приложения на стороне клиента каждый запрос может иметь функцию обновления внутри функции обновления вы можете использовать список вспомогательных функций для обновления ваших данных с помощью интерфейса хранилища чтобы подготовить среду relay, нам нужно создать файл конфигурации среды файл будет читаться рендерером запросов каждый раз, когда выполняется запрос давайте подготовим этот файл 6 1 создание файла среды мы будем следовать принципу проектирования из библиотеки relay, концепции коллокации для начала создадим папку в корне приложения и назовем ее relay внутри создайте файл и назовите его environment js environment js 6 2 настройка среды после этого импортируем из relay runtime relay runtime все, что нам нужно 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 настройка сетевого слоя сетевому слою нужна функция для получения данных с сервера прежде всего, давайте создадим функцию fetch, отвечающую за выполнение post запроса 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; мы оборачиваем запрос к серверу в блок try catch если произойдет ошибка, она будет выброшена, и приложение обработает ее в противном случае будет следовать обычное поведение и возвращать данные на сетевом слое также настраивается соединение с сервером приложения в back4app мы используем два основных ключа application id и client key ключи должны быть указаны в заголовках, как и url сервера чтобы получить эту информацию, перейдите в ваше приложение и нажмите на api console > graphql с открытой консолью graphql вы увидите url вверху, а внизу необходимые ключи приложения замените информацию в функции fetch на вашу помните, что не следует раскрывать мастер ключ 6 4 экспорт окружения relay runtime предоставляет функции, необходимые для использования сетевого слоя и создания хранилища наконец, давайте объединим их в новое окружение и экспортируем в наше приложение используйте код ниже в вашем файле окружения 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; финальный файл окружения будет выглядеть так 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; заключение отлично теперь, когда relay и окружение relay установлены и настроены, пришло время начать использовать graphql api back4app итак, следующий шаг создать наш первый рендерер запроса и связать его с нашим сервером