Question

问题在于服务器获取了请求，组件Stats被重新渲染，但道具未更新。据我所知，refetch不使用查询的结果来更新道具，而是使用它的规范化版本。我还尝试使用此页面的示例：https://github.com/facebook/relay/issues/2244。

我非常感谢您的帮助，包括有关分页容器的示例（我也无法使其正常工作）。

类型

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

查询

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

组件（索引> App>统计> StatsEntry）

索引呈现应用：

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

应用呈现统计，并具有 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;

统计信息为 this.props.data 数组中的每个值呈现 StatsEntry ：

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)
            }
        }
    `
);

Refetch Container不会更新道具

0 个答案: