Здравствуйте, меня зовут Луис, я занимаюсь разработкой полного цикла в Horizon Four. В этом посте я покажу вам шаги и несколько советов по созданию среды разработки с использованием Relay и GraphQL, так что без лишних слов, приступим!

Во-первых, что такое Relay и GraphQL?

GraphQL - это новый способ написания API. GraphQL представил новый подход к API, в котором мне не нужны несколько микросервисов. Мне просто нужен большой микросервис, где я могу запрашивать то, что я хочу, и он возвращает мне запрошенные данные, и тем самым снижает вероятность чрезмерной выборки ( больше данных, чем вам нужно) и неполная выборка (меньше данных, чем вам нужно). А Relay - это клиент, который может использовать этот огромный API, у которого есть собственное хранилище / кеш и курсор.

Вот несколько шагов по настройке среды:

Шаг 1. Создайте сервер GraphQL

Чтобы создать сервер GraphQL, вы можете использовать Graph Cool, его очень просто настроить, как firebase, но используя GraphQL в качестве языка запросов, или вы можете использовать create-graphql с create-graphql, вы сможете создать свой собственный сервер GraphQL полностью с нуля, с В этом шаблоне вы найдете предварительно настроенную среду GraphQL с аутентификацией пользователя, и вам просто нужно добавить свои: загрузчики, типы, соединения и мутации

Шаг второй: добавьте зависимости в свой проект React-Native:

Зависимости: yarn add react-relay relay

DevDependencies: yarn add relay-compiler babel-plugin-relay —-dev

Шаг третий: настройте .babelrc и package.json

Добавьте этот плагин в свой .babelrc:

  "plugins": [["relay", { "schema": "data/schema.json" }]],

Этот плагин поможет компилятору в этом случае babel понять код реле внутри ваших .js файлов.

Добавьте это в свои «скрипты» package.json:

"scripts": {
    "relay": "relay-compiler --src ./src --schema data/schema.graphql"
    "relay:watch": "yarn relay --watch",
},

Этот сценарий предварительно скомпилирует ваш код реле перед запуском кода, чтобы повысить производительность, поэтому, когда вы изменяете запрос или мутацию, вам нужно будет запустить yarn relay или вместо него вы можете использовать yarn relay:watch для отслеживания изменений и компиляции, когда вы изменяете запрос ретрансляции или мутацию.

Шаг четвертый: создайте среду ретрансляции

Теперь вам нужно создать среду для подключения к вашему GraphQL, приступим!

Мы создадим среду с relay-runtime, которую мы добавили ранее на втором этапе.

Вы будете использовать это, когда используете QueryRenderer, или createMutation будет передан в качестве параметра для подключения к серверу и выполнения выборки в api.

Шаг пятый: запросы и изменения

Теперь давайте настроим некоторые мутации и запросы с помощью relay. Итак, без лишних слов, вперед!

Создание запросов с QueryRenderer:

Для этого мы будем использовать QueryRenderer из react-relay, который мы добавили ранее.

OBS: ErrorView и LoadingView должны быть созданы вами, так что проявите творческий подход 😄🖖

Создание мутаций с помощью createMutation:

Для этого мы будем использовать commitMutation из react-relay, который мы добавили ранее.

Итак, теперь, когда мы создали наши запросы и наши мутации, нам просто нужно запустить yarn relay, чтобы скомпилировать наш код, и если вы все сделаете правильно, он будет скомпилирован.

ВАЖНО - Relay очень чувствителен к именованию, поэтому вам нужно следовать их шаблонам следующим образом:

Для запросов:

YourComponent_viewer or YourComponent_query

Для мутаций:

NameOfMutation + Mutation

Если вы сделаете все эти шаги правильно, ваша среда relay + graphql будет в порядке, чтобы начать разработку! Живи долго и процветай 🖖🏻

Мои социальные сети: