Refetch Container не обновляет реквизит - PullRequest
Новая
       90

Refetch Container не обновляет реквизит

0 голосов
/ 14 мая 2019

Проблема в том, что сервер получает запрос, компонент Stats перерисовывается, но реквизиты не обновляются.Насколько я знаю, при обновлении не используется результат запроса для обновления реквизита, а вместо этого используется его нормализованная версия.Я также попытался использовать пример этой страницы: https://github.com/facebook/relay/issues/2244.

Я ценю любую помощь, в том числе пример с контейнером нумерации страниц (я тоже не мог заставить его работать).

Типы 

type Entry {
    _id: String,
    posts: Int!,
    timestamp: Date
}

Запросы 

type Query {
    Stats(page: Int): [Entry]
}

Компоненты (index> Приложение> Статистика> StatsEntry)

index отображает приложение : 

class Index extends Component {
    render() {
        return (<App />);
    }
}

Приложение отображает Stats и имеет QueryRenderer : 

const AppStatsQuery = graphql`
    query AppStatsQuery ($page: Int!) {
        Stats (page: $page) {
            ...Stats_data
        }
    }
`;

class App extends Component {

    render() {
        return (
            <QueryRenderer
                variables={{ page: 1 }}
                environment={Environment}
                query={AppStatsQuery}
                render={({ error, props }) => {
                    if (error) {
                        return <div>{error.message}</div>;
                    } else if (props) {
                        return <Stats data={props.Stats} />;
                    }
                    return <div>Loading</div>;
                }}
            />
        );
    }
}

export default App;

Stats отображает StatsEntry для каждого значения в массиве this.props.data : 

class Stats extends Component {

    _refetch = (event, page) => {

        const newPage = this.state && this.state.page ? this.state.page + 1 : 1;

        this.setState({ page: newPage });

        this.props.relay.refetch({ page: newPage },
                { page },
                { page: newPage },
                { force: true },
            );
    };


    render() {
        const stats = this.props.data;

        return (
            <Paper>
                <Table>
                    (...)
                    <TableBody>
                        {stats.map((instagram, index) => (

                            <StatsEntry key={instagram.__id}
                                        instagram={stats[index]}/>
                        ))}
                    </TableBody>
                </Table>
                <TablePagination
                    (...)
                    onChangePage={this._refetch}
                />
            </Paper>
        );
    }
}


export default createRefetchContainer(
    Stats,
    {
        data: graphql`
            fragment Stats_data on Entry @relay(plural: true)
            @argumentDefinitions(
                page: {type: "Int", defaultValue: 10}
            ) {
                ...StatsEntry_instagram
            }
        `
    },
    graphql`
        query StatsRefetchQuery($page: Int!) {
            Stats(page: $page) {
                ...Stats_data @arguments(page: $page)
            }
        }
    `
);
...