Интегрировать приложение React Native с GraphQL и клиентом Apollo

Теперь давайте установим все  npm зависимости, которые будут использоваться в этом демонстрационном приложении. Вы узнаете о каждой отдельной зависимости, когда это необходимо, в оставшейся части руководства. Обратите внимание, что некоторые из этих зависимостей являются одноранговыми, и вы не можете использовать их напрямую.

yarn add apollo-client apollo-cache-inmemory graphql-tag apollo-link-rest apollo-link graphql graphql-anywhere qs

Вам также может понравиться: почему и когда использовать GraphQL .

После того, как все зависимости установлены, давайте добавим компонент заголовка в  App.js файл и заменим остальное содержимое, которое поставляется по умолчанию, приложением Expo.

//App.js
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Headlines App</Text>
        </View>
        <View style={styles.contentContainer}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  header: {
    marginTop: 50,
    alignItems: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth
  },
  headerText: {
    marginBottom: 5,
    fontSize: 30,
    fontWeight: 'bold'
  },
  contentContainer: {
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { RestLink } from 'apollo-link-rest'

const restLink = new RestLink({
  uri: 'https://newsapi.org/v2/',
  headers: {
    Authorization: '47e036d83ccc4058b1f85362bc2be1f4'
  }
})

export const client = new ApolloClient({
  link: restLink,
  cache: new InMemoryCache()
})

import gql from 'graphql-tag`

export const Headlines = gql`
  query TopHeadlines {
    headlines
      @rest(
        type: "HeadlinesPayload"
        path: "top-headlines?country=us&category=technology"
      ) {
      totalResults
      articles @type(name: "ArticlePayload") {
        title
        publishedAt
        url
        urlToImage
        source @type(name: "SourcePayload") {
          name
        }
      }
    }
  }
`

import { client } from './src/graphql/Client'
import { Headlines } from './src/graphql/Queries'

class App extends Component {
 componentDidMount() {
 this.requestHeadlines()
 }

 requestHeadlines = () => {
 client
 .query({
 query: Headlines
 })
 .then(response => {
 console.log('RESPONSE ==>', response)
 })
 .catch(error => {
 console.log('ERROR ==>', error)
 })
 }

import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'

// ... inside App component
state = {
  loading: true
}

render() {
 const { loading } = this.state
 if (loading) {
 return (
 <View
 style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
 <ActivityIndicator size='large' />
 </View>
 )
 }

 return (
 <View style={styles.container}>
 <View style={styles.header}>
 <Text style={styles.headerText}>Headlines App</Text>
 </View>
 <View style={styles.contentContainer}>
 <Text>Open up App.js to start working on your app!</Text>
 </View>
 </View>
 )
 }

.then(response => {
 console.log('RESPONSE ==>', response)
 this.setState({ loading: response.loading })
})

import {
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  FlatList
} from 'react-native'

// inside the App component
state = {
  loading: true,
  // add this
  articles: []
}

this.setState({
  loading: response.loading,
  // add this
  articles: response.data.headlines.articles
})

return (
  <View style={styles.container}>
    <View style={styles.header}>
      <Text style={styles.headerText}>Headlines App</Text>
    </View>
    <View style={styles.contentContainer}>
      <FlatList
        data={articles}
        renderItem={({ item }) => <Article {...item} />}
        keyExtractor={item => `${item.url}`}
      />
    </View>
  </View>
)

container: {
 flex: 1,
 backgroundColor: '#fff',
 marginBottom: 70
 },

 // ... rest remains same
contentContainer: {
 marginTop: 30,
 }

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

const Article = ({ title, source }) => (
  <View style={styles.content}>
    <Text style={styles.source}>{source.name}</Text>
    <Text style={styles.title}>{title}</Text>
  </View>
)

const styles = StyleSheet.create({
  content: {
    marginLeft: 10,
    flex: 1
  },
  source: {
    color: '#3d3c41',
    fontSize: 14,
    fontWeight: '500',
    marginBottom: 3
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15
  }
})

export default Article

renderItem={({ item }) => <Article {...item} />}

import Article from './src/components/Article'