Рендеринг запросов в React Native с Relay и GraphQL на Back4App

29min
Рендерер запросов на Back4App
Введение
В нашем предыдущем руководстве, мы узнали, как подготовить нашу среду Relay. Теперь вы готовы начать разработку вашего приложения на React Native.
В этом руководстве вы узнаете, как сделать ваш первый запрос на Back4App. Мы погрузимся в рендерер запросов Relay, поймем его основные принципы и используем его для получения ваших первых данных из Back4App.
Цели
Получить обзор рендерера запросов Relay;
Сделать запрос к Back4App GraphQL API из приложения React Native с использованием Relay;
Предварительные требования
Приложение создано на панели управления Back4App
Приложение React Native с настроенной средой Relay согласно предыдущим документам.
Прочитайте о узлах Relay и соединениях
Что такое рендерер запросов?
Так же, как React строит дерево компонентов, Relay строит дерево компонентов данных. Это означает, что каждый компонент приложения будет владельцем своих фрагментов данных. Фрагмент будет содержать информацию о данных, необходимую для его отображения на экране, и Relay гарантирует, что эти данные доступны перед рендерингом компонента.
Управляя этим подходом, рендерер запросов является корневым компонентом, необходимым для составления этих фрагментов и подготовки запроса для получения из нашего бэкенда.
Почему важно понимать рендерер запросов?
Понимание использования рендерера запросов важно для абстрагирования вашего приложения различными способами. Хорошая абстракция кода может предотвратить часы работы, ошибки, время отладки и т.д.
Как работает рендерер вместе с API Back4app
В последнем уроке мы подготовили файл окружения Relay, который указывает информацию о подключении к Back4App. Используя эту конфигурацию, Relay будет заботиться о взаимодействии с API Back4App. Вам не нужно беспокоиться о подключении. Просто сосредоточьтесь на создании компонентов данных.
- Создание класса на панели управления Back4App
Давайте создадим ваш первый класс и заполним его несколькими объектами, используя консоль GraphQL Back4App. Класс Person имеет 2 поля: name, которое является строкой, и salary, которое является целым числом. Перейдите в Панель управления->Core->Консоль GraphQL и используйте код ниже:
GraphQL
mutation CreateClass {
 createClass(input:{
   name: "Person"
   schemaFields: {
     addStrings: [{name: "name"}]
     addNumbers: [{name: "salary"}]
   }
 }){
   class{
     schemaFields{
       name
       __typename
     }
   }
 }
}
mutation CreateClass {
 createClass(input:{
   name: "Person"
   schemaFields: {
     addStrings: [{name: "name"}]
     addNumbers: [{name: "salary"}]
   }
 }){
   class{
     schemaFields{
       name
       __typename
     }
   }
 }
}
﻿
Вы увидите результат ниже:
создание класса 
﻿
Теперь давайте создадим несколько объектов внутри этого класса. Перейдите к мутации создания объекта руководство, чтобы увидеть, как обработать этот случай. Убедитесь, что вы используете последнюю версию Parse Server, чтобы использовать наиболее актуальную нотацию GraphQL API, доступную на Back4App.
GraphQL
mutation CreateObject{
 createHero(input: {fields: {name: "Allana Foley", salary: 1000}}){
   person {
     id
     name
     salary
   }
 }
}
mutation CreateObject{
 createHero(input: {fields: {name: "Allana Foley", salary: 1000}}){
   person {
     id
     name
     salary
   }
 }
}
﻿
создание объекта 
﻿
Теперь класс Person создан и имеет поля имя и зарплата.
После создания нового класса Back4App автоматически генерирует все необходимые ресурсы для безопасного использования бэкенда.
Одним из примеров является список объектов. Back4App уже создал необходимые соединения для запроса списка Person: People.
Чтобы лучше понять, перейдите на площадку, обновите страницу и откройте вкладку документации, затем найдите People. Back4App сгенерировал поле соединения. Вы также можете запрашивать класс person как список. Обратите внимание, что поле Query.people является PersonConnection.
Relay будет использовать поле соединения для отображения списка объектов Person.
Документация по полю Person:
﻿
И документация по полю соединения People (Person):
﻿
- Обновление схемы
Важно помнить, что если в ваше приложение добавляется новый класс, необходимо обновить схему внутри корня приложения React Native.
При необходимости перейдите в Скачать схему документацию и повторите шаги для обновления схемы.
- Первый пример контейнера фрагмента
Прежде чем продолжить учебник, давайте познакомим вас с контейнером фрагмента.
Давайте создадим компонент, который будет владельцем информации о Person. Этот компонент будет содержать имя и зарплату человека. Здесь вы можете запросить любое поле person для создания вашего компонента. Теперь мы собираемся продолжить с этими двумя полями.
Создайте файл и назовите его PersonCard.js﻿
внутри него давайте создадим простой функциональный компонент
JS
import React from 'react';

const PersonCard = () => {
   return (
       <div>
           
       </div>
   );
};
import React from 'react';

const PersonCard = () => {
   return (
       <div>
           
       </div>
   );
};
﻿
Замените строку export default на код ниже:
JS
export default createFragmentContainer(PersonCard, {
   person: graphql`
   fragment PersonCard_person on Person {
     id
     name
     salary
   }
 `,
});
export default createFragmentContainer(PersonCard, {
   person: graphql`
   fragment PersonCard_person on Person {
     id
     name
     salary
   }
 `,
});
﻿
Код выше создаст фрагмент Person, который запрашивает только id, имя и зарплату.
Завершите обновление остальной части компонента следующим кодом:
JS
const PersonCard = ({person}) => {
   return (
       <View>
           <Text>Name: {person.name}</Text>
           <Text>Salary: {person.salary}</Text>
       </View>
   );
};
const PersonCard = ({person}) => {
   return (
       <View>
           <Text>Name: {person.name}</Text>
           <Text>Salary: {person.salary}</Text>
       </View>
   );
};
﻿
Конечный результат должен выглядеть так:
JS
import React from "react";
import { createFragmentContainer, graphql } from "react-relay";
import { View, Text } from "react-native";

const PersonCard = ({person}) => {
   return (
       <View>
           <Text>Name: {person.name}</Text>
           <Text>Salary: {person.salary}</Text>
       </View>
   );
};

export default createFragmentContainer(PersonCard, {
   person: graphql`
   fragment PersonCard_person on Person {
     id
     name
     salary
   }
 `,
});
import React from "react";
import { createFragmentContainer, graphql } from "react-relay";
import { View, Text } from "react-native";

const PersonCard = ({person}) => {
   return (
       <View>
           <Text>Name: {person.name}</Text>
           <Text>Salary: {person.salary}</Text>
       </View>
   );
};

export default createFragmentContainer(PersonCard, {
   person: graphql`
   fragment PersonCard_person on Person {
     id
     name
     salary
   }
 `,
});
﻿
- Создание рендерера запроса
Следующий шаг - создать рендерер запроса для вашего списка объектов. Рендерер запроса - это корневой компонент для получения данных компонентов и подготовки их для извлечения данных из бэкенда. Вы узнаете, как извлекать данные для класса Person на Back4App.
1 - Создание файла
Создайте новый файл и назовите его PersonRenderer.js﻿
Скопируйте код ниже и вставьте его в файл PersonRenderer.
JS
const PersonRenderer = () => {
 return (
   <QueryRenderer
     environment={Environment}
     query={graphql``}
     variables={null}
     render={({error, props}) => {
       if (error) {
         return (
           <View>
             <Text>{error.message}</Text>
           </View>
         );
       } else if (props) {
         // @todo here will be implement the person card for each item from result
       }
       return (
         <View>
           <Text>loading</Text>
         </View>
       );
     }}
   />
 );
};

export default PersonRenderer;
const PersonRenderer = () => {
 return (
   <QueryRenderer
     environment={Environment}
     query={graphql``}
     variables={null}
     render={({error, props}) => {
       if (error) {
         return (
           <View>
             <Text>{error.message}</Text>
           </View>
         );
       } else if (props) {
         // @todo here will be implement the person card for each item from result
       }
       return (
         <View>
           <Text>loading</Text>
         </View>
       );
     }}
   />
 );
};

export default PersonRenderer;
﻿
2 - Понимание свойств QueryRenderer
Давайте начнем с Query Renderer с пустыми свойствами: graphql, variables и render. Шаг за шагом вы будете реализовывать каждое из них поэтапно.
Прежде всего, ваше приложение должно указать запрос для Query Renderer. Здесь наше приложение будет использовать список людей. В свойствах запроса вставьте следующий код:
GraphQL
graphql`
 query PersonRendererQuery {
   people {
     edges {
       node {
         ...PersonCard_person
       }
     }
   }
 }`
graphql`
 query PersonRendererQuery {
   people {
     edges {
       node {
         ...PersonCard_person
       }
     }
   }
 }`
﻿
graphql поступает из react-relay и реализует запрос в виде строки.
Важно понимать связи между edges и node. Запрос выше использует соединение узлов людей с сервера Back4App. Каждый раз, когда вы создаете новый класс, за ним будет следовать соединение узлов.
Переменные
При необходимости рендерер запросов будет использовать переменные. Хороший пример: когда приложение запрашивает запрос для человека по id. Поскольку это не так в данный момент, давайте передадим null в свойства переменных.
Заполнение карточки человека
Этот запрос вернет список людей. Рендерер запросов гарантирует, что данные будут доступны для рендеринга. Если это не так, будет выдана ошибка. Свойства, ответственные за это, - это render.
Заполните свойства рендеринга следующим кодом:
JS
render={({error, props}) => {
 if (error) {
   return (
     <View>
       <Text>{error.message}</Text>
     </View>
   );
 } else if (props) {
    return props.people.edges.map(({node}) => <PersonCard person={node} />);
 }
 return (
   <View>
     <Text>loading</Text>
   </View>
 );
}}
render={({error, props}) => {
 if (error) {
   return (
     <View>
       <Text>{error.message}</Text>
     </View>
   );
 } else if (props) {
    return props.people.edges.map(({node}) => <PersonCard person={node} />);
 }
 return (
   <View>
     <Text>loading</Text>
   </View>
 );
}}
﻿
Замените закомментированный todo на javascript map для рендеринга карточки человека для каждого результата из списка.
Как уже было сказано, рендерер запросов берет на себя ответственность за то, чтобы данные были доступны только тогда, когда они готовы. До тех пор будет отображаться сообщение о загрузке. Если произойдет ошибка, она будет отображена на экране, предотвращая неожиданное завершение работы приложения.
Наконец, давайте улучшим рендеринг людей, заменив .map на новую функцию. Поместите её перед Query Renderer:
GraphQL
 const renderPersons = (people) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };
 const renderPersons = (people) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };
﻿
И конечный результат должен выглядеть так:
GraphQL
import React from "react";
import { QueryRenderer } from "react-relay";
import Environment from "./relay/Environment";
import PersonCard from "./PersonCard";
import { View, Text } from "react-native";

const PersonRenderer = () => {
 const renderPersons = (people) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };

 return (
   <QueryRenderer
     environment={Environment}
     query={graphql`
       query PersonRendererQuery {
         people {
           edges {
             node {
               ...PersonCard_person
             }
           }
         }
       }
     `}
     variables={null}
     render={({error, props}) => {
       if (error) {
         return (
           <View>
             <Text>{error.message}</Text>
           </View>
         );
       } else if (props) {
         return renderPersons(props.people);
       }
       return (
         <View>
           <Text>loading</Text>
         </View>
       );
     }}
   />
 );
};

export default PersonRenderer;
import React from "react";
import { QueryRenderer } from "react-relay";
import Environment from "./relay/Environment";
import PersonCard from "./PersonCard";
import { View, Text } from "react-native";

const PersonRenderer = () => {
 const renderPersons = (people) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };

 return (
   <QueryRenderer
     environment={Environment}
     query={graphql`
       query PersonRendererQuery {
         people {
           edges {
             node {
               ...PersonCard_person
             }
           }
         }
       }
     `}
     variables={null}
     render={({error, props}) => {
       if (error) {
         return (
           <View>
             <Text>{error.message}</Text>
           </View>
         );
       } else if (props) {
         return renderPersons(props.people);
       }
       return (
         <View>
           <Text>loading</Text>
         </View>
       );
     }}
   />
 );
};

export default PersonRenderer;
﻿
- Создание вашего первого запроса
Теперь пришло время получить данные о человеке, используя PersonRenderer. Если всё в порядке, ваше приложение теперь имеет два новых компонента: PersonRenderer и PersonCard.
Перед запуском приложения Relay нуждается в Relay Compiler для выполнения и генерации типов компонентов. Для этого выполните в вашем терминале:
пряжа реле
В app.js добавьте следующий код:
JS
import React from 'react';
import { SafeAreaView, StatusBar, View, Text } from 'react-native';

import Providers from './Providers';
import PersonRenderer from '../components/home/person/PersonRenderer';

const App = () => {
 return (
   <Providers>
     <StatusBar barStyle="dark-content" />
     <SafeAreaView>
       <View
         style={ {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
           marginTop: 100,
         } }>
         <Text style={ {fontWeight: "bold", textAlign: "center"} }>
           Back4App React Native Relay - Query Renderer List Example
         </Text>
         <PersonRenderer />
       </View>
     </SafeAreaView>
   </Providers>
 );
};

export default App;
import React from 'react';
import { SafeAreaView, StatusBar, View, Text } from 'react-native';

import Providers from './Providers';
import PersonRenderer from '../components/home/person/PersonRenderer';

const App = () => {
 return (
   <Providers>
     <StatusBar barStyle="dark-content" />
     <SafeAreaView>
       <View
         style={ {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
           marginTop: 100,
         } }>
         <Text style={ {fontWeight: "bold", textAlign: "center"} }>
           Back4App React Native Relay - Query Renderer List Example
         </Text>
         <PersonRenderer />
       </View>
     </SafeAreaView>
   </Providers>
 );
};

export default App;
﻿
Код app.js изначально взят из create-react-native-app. Он добавил View с стилем для центрирования содержимого на экране с отступом 10px сверху. Внутри него есть текст с меткой, чтобы дать некоторый контекст для вывода, и PersonRenderer для отображения списка людей.
Вам нужно получить следующий результат:
﻿
Рендеринг
В нашем приложении Back4App React Native мы импортируем PersonRenderer непосредственно в App.js. Поскольку PersonRenderer является корневым компонентом и имеет свой QueryRenderer, Person должен отображаться без каких-либо ошибок:
﻿
- Типизация компонентов
Этот шаг имеет смысл для приложения, которое работает с TypeScript. Если ваше приложение не использует TypeScript, продолжайте.
Одна из возможностей Relay Compiler заключается в том, чтобы генерировать типы из каждого компонента данных. Давайте типизируем PersonRenderer и PersonCard, чтобы сделать приложение более мощным.
Типизация PersonRenderer
Типизируйте аргумент функции renderPerson people в PersonRenderer:
JS
 const renderPersons = (people: PersonRendererQuery['response']['people']) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };
 const renderPersons = (people: PersonRendererQuery['response']['people']) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };
﻿
Импортируйте тип PersonRendererQuery из __generated__ папки, созданной внутри той же папки, что и PersonRenderer.
Типизация PersonCard
Перейдите к PersonCard, создайте новый объект типа и назовите его PersonCardProps:
JS
  type PersonCardProps = {};
  type PersonCardProps = {};
﻿
Импортируйте типPersonCard_person из__generated__ папок:
JS
  import {PersonCard_person} from './__generated__/PersonCard_person.graphql';
  import {PersonCard_person} from './__generated__/PersonCard_person.graphql';
﻿
Добавьте человека внутри типа PersonCardProps:
JS
  type PersonCardProps = {
    person: PersonCard_person;
  };
  type PersonCardProps = {
    person: PersonCard_person;
  };
﻿
В аргументах props от PersonCard, типизируйте компонент сPersonCardProps:
 const PersonCard = ({person}: PersonCardProps) => { ... }
Конечный результат обоих компонентов должен выглядеть так:
PersonRenderer
JS
import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import {Environment} from '../../../relay';
import PersonCard from './PersonCard';
import {View, Text} from 'react-native';
import {PersonRendererQuery} from './__generated__/PersonRendererQuery.graphql';

const PersonRenderer = () => {
const renderPersons = (people: PersonRendererQuery['response']['people']) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };

 return (
   <QueryRenderer
     environment={Environment}
     query={graphql`
       query PersonRendererQuery {
         people {
           edges {
             node {
               ...PersonCard_person
             }
           }
         }
       }
     `}
     variables={null}
     render={({error, props}) => {
       if (error) {
         return (
           <View>
             <Text>{error.message}</Text>
           </View>
         );
       } else if (props) {
         return renderPersons(props.people);
       }
       return (
         <View>
           <Text>loading</Text>
         </View>
       );
     }}
   />
 );
};

export default PersonRenderer;
import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import {Environment} from '../../../relay';
import PersonCard from './PersonCard';
import {View, Text} from 'react-native';
import {PersonRendererQuery} from './__generated__/PersonRendererQuery.graphql';

const PersonRenderer = () => {
const renderPersons = (people: PersonRendererQuery['response']['people']) => {
   return people.edges.map(({node}) => <PersonCard person={node} />);
 };

 return (
   <QueryRenderer
     environment={Environment}
     query={graphql`
       query PersonRendererQuery {
         people {
           edges {
             node {
               ...PersonCard_person
             }
           }
         }
       }
     `}
     variables={null}
     render={({error, props}) => {
       if (error) {
         return (
           <View>
             <Text>{error.message}</Text>
           </View>
         );
       } else if (props) {
         return renderPersons(props.people);
       }
       return (
         <View>
           <Text>loading</Text>
         </View>
       );
     }}
   />
 );
};

export default PersonRenderer;
﻿
PersonCard
JS
import React from 'react';

import {createFragmentContainer, graphql} from 'react-relay';

import {View, Text} from 'react-native';
import {PersonCard_person} from './__generated__/PersonCard_person.graphql';

type PersonCardProps = {
 person: PersonCard_person;
};

const PersonCard = ({person}: PersonCardProps) => {
 return (
   <View>
     <Text>Name: {person.name}</Text>
     <Text>Salary: {person.salary}</Text>
   </View>
 );
};

export default createFragmentContainer(PersonCard, {
 person: graphql`
   fragment PersonCard_person on Person {
     id
     name
     salary
   }
 `,
});
import React from 'react';

import {createFragmentContainer, graphql} from 'react-relay';

import {View, Text} from 'react-native';
import {PersonCard_person} from './__generated__/PersonCard_person.graphql';

type PersonCardProps = {
 person: PersonCard_person;
};

const PersonCard = ({person}: PersonCardProps) => {
 return (
   <View>
     <Text>Name: {person.name}</Text>
     <Text>Salary: {person.salary}</Text>
   </View>
 );
};

export default createFragmentContainer(PersonCard, {
 person: graphql`
   fragment PersonCard_person on Person {
     id
     name
     salary
   }
 `,
});
﻿
Заключение
Конечный результат QueryRenderer продемонстрировал, как приложение может быть абстрагировано. Приложение может отображать Персону внутри Query Renderer. Поскольку PersonCard имеет больше компонентов, это не изменяет способ, которым был построен Query Renderer.
PersonRenderer был создан, чтобы показать, как можно выполнить запрос в простых шагах, в сочетании с мощью сервера Back4App. В следующем руководстве вы узнаете, как получить конкретный объект Персоны и показать его атрибуты.
React Native: Установка и конфигурация Relay с GraphQL
Интеграция Parse.User с мутациями Relay в React Native
Рендеринг запросов в React Native с Relay и GraphQL на Back4App

Рендерер запросов на Back4App

Введение

Цели

Предварительные требования

Что такое рендерер запросов?

Почему важно понимать рендерер запросов?

Как работает рендерер вместе с API Back4app

1 - Создание класса на панели управления Back4App

2 - Обновление схемы

3 - Первый пример контейнера фрагмента

4 - Создание рендерера запроса

4.1 - Создание файла

4.2 - Понимание свойств QueryRenderer

5 - Создание вашего первого запроса

6 - Типизация компонентов

Заключение
