GraphQL Query Component, не дающий результатов или ошибок - PullRequest
Новая
       16

GraphQL Query Component, не дающий результатов или ошибок

0 голосов
/ 18 сентября 2018

Я использую Graphql HOC немного без особых проблем, но я пытаюсь начать использовать новый компонент <Query />, но у меня возникла проблема.Я следую за документами здесь , но я не получаю никаких результатов.Я знаю, что запрашиваю в запросе gql больше, чем я хочу отобразить, но сейчас я просто пытаюсь отобразить как можно меньше, чтобы я знал, что это работает.Прямо сейчас, когда код запускается, я не получаю <ActivityIndicator />, я не получаю ошибку, я просто получаю пустое место, куда должны идти данные.

Весь мой код в этом компонентениже.Кто-нибудь может увидеть причину, почему я ничего не придумаю?Я выполняю этот запрос (за исключением части User($id String!) и передаю фактический идентификатор) через площадку graph.cool, и он выплевывает ожидаемые данные. 

import React, { Component } from 'react';
import { StyleSheet, Text, ActivityIndicator, View } from 'react-native';
import { Container, Content, Icon, Button } from 'native-base';
import { withApollo, Query } from 'react-apollo';
import gql from 'graphql-tag';

import theme from '../../styles/theme';
import KoviHeader from '../../layout/KoviHeader';
import FooterTabs from '../../layout/FooterTabs';
import { signOut } from '../user/loginUtils';

const GET_USER_DETAILS = gql`
    query User($id: String!){
        user(id: $id) {
            id
            propertyNotes {
                title
                body
                property {
                    id
                    propertyName
                    createdAt
                }
            }
        }
    }
`;

class Dashboard extends Component {

    render() {

        const { screenProps } = this.props;

        return (
            <Container style={styles.container}>
                <KoviHeader
                    title='Dashboard'
                    navigation={this.props.navigation}
                />

            <Content>

                <Query query={GET_USER_DETAILS} variables={{id: screenProps.user.id}}>
                    {({ loading, error, data }) => {

                        if (loading) return <ActivityIndicator size="large" />;
                        if (error) return `Error! ${error}`;

                        return (
                            <View>
                                {data.user.map(u => {
                                    <Text>{u.id}</Text>
                                })}
                            </View>
                        )
                    }

                    }
                </Query>

                <Button
                    full
                    style={styles.button}
                    onPress={() => {
                        signOut()
                        this.props.client.resetStore();
                        }
                    }
                >
                    <Text style={styles.buttonText}>Logout</Text>
                </Button>
            </Content>

                <FooterTabs
                    activeBtn='dashboard'
                    navigation={this.props.navigation}
                />
        </Container>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-end'
    },
    button: {
        backgroundColor: theme.COLOR_ORANGE,
    },
    buttonText: {
        color: '#fff',
        fontWeight: 'bold'
    }
})

export default withApollo(Dashboard);
...