Начало работы с GraphQL и React Native

Хранение данных с помощью API контекста

Нам понадобится где-то хранить наши данные, которые будут доступны в любом из наших компонентов, независимо от того, как далеко они находятся в дереве. Если бы нам нужно было передать данные через несколько детей только для того, чтобы добраться до нашего компонента, это было бы не самой эффективной вещью. Учитывая, что наши потребности в хранении данных довольно просты для этого примера, было бы хорошо использовать React’s Context API, а не какой-нибудь более сложный инструмент управления состоянием, такой как Redux. Context API позволяет передавать глобальное состояние по нашему дереву компонентов без необходимости каждый раз пропускать его через реквизиты, и для нашего текущего примера этого достаточно.

Преимущества Redux поверх Context API можно в целом сузить до трех пунктов:

• Redux поставляется с отладчиком путешествий во времени
• он предоставляет разработчику API промежуточного программного обеспечения, предоставляя вам доступ к таким инструментам, как redux-sagas
• его привязки React предотвращают слишком много рендеров

Использование Context API не может быть проще. По сути, нам просто нужно создать компонент <Provider /> для хранения всех наших данных и доступа к ним путем создания компонента <Consumer /> когда он нам понадобится.

Создание провайдера

Давайте вернемся к App.js , где нам нужно всего лишь добавить пару строк, чтобы наш Provider заработал. Сначала мы начнем с создания нашего AppContext . Нам понадобится доступ к этому в любом файле, где мы хотим использовать сохраненные данные, поэтому нам нужно убедиться, что они экспортированы. Чтобы создать AppContext , добавьте следующую строку в App.js :

 // ./App.js export const AppContext = React.createContext({ data: { coffee: { beans: [] } } }); 

Здесь мы создаем контекст и инициализируем его пустыми данными. Далее мы хотим заполнить AppProvider данными, которые мы получаем от сервера GraphQL.

Хранение данных cCoffee

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

 // ./App.js render() { return ( <ApolloProvider client={client}> <Query query={QUERY} > {({ loading, error, data }) => { if (loading || error) return <View /> return <AppContext.Provider value={data.coffee.beans} style={{ flex: 1 }}> {this.state.isFontsLoaded ? <AppContainer /> : <View />} </AppContext.Provider> }} </Query> </ApolloProvider> ); } 

Здесь вы можете видеть, что мы напрямую data.coffee.beans данные bean ( data.coffee.beans ) в нашем провайдере. На данный момент у нас есть все необходимые данные, но мы по-прежнему передаем содержимое нашего заполнителя. Последняя часть этой головоломки состоит в том, чтобы изменить Home.js для отображения наших данных с использованием Consumer .

Создание потребителя приложения

Во-первых, нам нужно импортировать наш AppContext из более раннего, чтобы использовать Consumer . Для этого нам просто нужно импортировать его из App.js в Home.js :

 // ./src/Home.js import { AppContext } from '../App'; 

Использование Consumer работает как любой другой компонент React. Для наших текущих целей мы добавим его в нашу функцию render и будем использовать данные для заполнения нашего FlatList . Наша функция рендеринга должна выглядеть примерно так:

 // ./src/Home.js render() { return ( <AppContext.Consumer> { (context) => <View style={styles.container}> <Image style={styles.header} source={require('../assets/header.png')} /> <View style={{ marginLeft: 30, marginTop: 30 }}> <Text style={styles.title}>COFFEE</Text> <Text style={styles.subtitle}>SELECTION</Text> </View> <FlatList style={styles.list} data={context} renderItem={({ item }) => <TouchableOpacity style={styles.block} onPress={() => this.props.navigation.navigate('CoffeePage', { item: item })}> <Image style={styles.productImage} source={{ uri: item.productImage }} /> <Text style={styles.name}>{item.name}</Text> <Text style={styles.price}>{item.price}</Text> </TouchableOpacity>} numColumns={2} /> </View> } </AppContext.Consumer> ); } 

Если мы AppContext.Consumer по приведенному выше коду, вы увидите, что AppContext.Consumer предоставляет нам context , который содержит наши данные GraphQL. Мы используем этот context для заполнения компонента FlatList , передав его в реквизит data . Когда пользователь нажимает на один из элементов кофе, наши данные передаются через параметры навигации в наш CoffeePage.js , что позволяет получить к ним доступ в этом представлении. Если вы сейчас сохраните свои измененные файлы и запустите приложение на Expo, вы должны увидеть свой полностью заполненный FlatList .

Резюме

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

Если вы хотите изучить GraphQL более подробно, я рекомендую вам прочитать раздел « Запросы и мутации » документации GraphQL и, возможно, начать самостоятельно программировать сервер Apollo с использованием codesandbox.io .

Весь код этого проекта можно найти на GitHub , так что не стесняйтесь клонировать / раскладывать репозиторий и вносить свои собственные улучшения!