Как лучше всего вызывать API-интерфейс GraphQL в React Native? - PullRequest
Новая
       34

Как лучше всего вызывать API-интерфейс GraphQL в React Native?

0 голосов
/ 01 ноября 2019

Я использую GraphQL API для моего собственного собственного проекта. Я хотел бы знать некоторые вопросы о GraphQL, так как я начинаю его использовать.

Я нашел два метода выборки данных из GraphQL для реагирования на собственное приложение

  1. Использование ApolloProvider для выборки данных
  2. Использование метода Fetch (аналогично API REST) ​​

Я хочу знать, как правильно выполнять запросы GraphQL с помощью реагирующего нативного приложения.

Как только я использую теги ApolloProvider и GraphQL, ответ находится между тегами запроса. Но как только я использую обычную выборку, она будет работать как обычный HTTP-запрос.

Обычная функция выборки для получения данных GraphQL 

fetch('http://snowtooth.moonhighway.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: 'query { allLifts { id name status } }',
  }),
})
  .then(response => response.json())
  .then(responseText => {
    this.setState({users_data: responseText.data.allLifts});
  })
  .catch(error => {});

Это стандартный GraphQLиспользуя ApolloProvider и теги 

const query = gql`
        query {
             players {
                position
                name
                team
                jerseyNumber
                wonSuperBowl
            }
        }
`;

//Define your component
class PlayersList extends PureComponent {
    //Define your method for rendering each individual item
    _renderItem({item}) {
        //Return the UI
        //It will return the text green or red depending if that player won a super bowl or not.
        return (
            <TouchableOpacity style={styles.itemContainer}>
                <Text style={styles.itemText}>Position: {item.position}</Text>
                <Text style={styles.itemText}>Name: {item.name}</Text>
                <Text style={styles.itemText}>Team: {item.team}</Text>
                <Text style={styles.itemText}>Jersey Number: {item.jerseyNumber}</Text>
                <Text style={[styles.itemText, item.wonSuperBowl ? styles.wonSuperBowlText : styles.errorText]}>
                    Won Superbowl: {item.wonSuperBowl ? 'YES' : 'NO'}
                </Text>
            </TouchableOpacity>
        );
    }
    render() {
        //render your ui with the styles set for each ui element.
        return (
            <ScrollView style={styles.container}>
                {/*Can use an array to override styles for your UI elements.*/}
                <Text style={[styles.itemText, styles.headerText]}>Top 25 NFL Players List</Text>
                <Query query={query}>
                    {/* The props.children of the Query will be a callback with a response, and error parameter. */}
                    {(response, error) => {
                        if(error) {
                            console.log('Response Error-------', error);
                            return <Text style={styles.errorText}>{error}</Text>
                        }
                        //If the response is done, then will return the FlatList
                        if(response) {
                            console.log('response-data-------------', response);
                            //Return the FlatList if there is not an error.
                            return <FlatList 
                                        data={response.data.players}
                                        renderItem={(item) => this._renderItem(item)}
                                    />;
                        } 
                    }}
                </Query>
            </ScrollView>
        );
    }
}

Я хотел бы знать, каков наилучший способ получения данных с использованием GraphQL. Если я получу нормальную загрузку, каковы ограничения?

...