Question

我有一个具有以下定义的GraphQL字段：

query GetData($date: DateTime, $id: Int) {
    getData(date: $date, id: $id) {
        ...Data
    }
}

我一直在使用Apollo Client Query组件在React中使用此数据，像这样：

ids.map((id) => (
    <Query
        key={id}
        query={Queries.getData}
        variables={{
            date: date,
            id: id,
        }}
        fetchPolicy="network-only"
    >
        {({
            loading,
            error,
            data,
        }: QueryResult<{ data: any}>) => {
            return (

            );
        }}
    </Query>

在一个单独的组件中，我需要在Apollo缓存中重用此数据（用于所有ID）。为此，我写了一个本地解析器

resolvers: {
    Query: {
        getAllData: (parent: any, args: any, cache: any) => {
            let count = 0;
            args.ids.forEach((id: number) => {
                try {
                    const cacheId = `TypeName:${id}`;

                    const locationSchedule = client.readFragment({
                        id: cacheId,
                        fragment: Fragments.Fragment,
                        fragmentName: Fragments.Fragment.definitions[0].name.value,
                    });

                    // count stuff and store in count variable
                } catch (e) {
                    console.log(e);
                }
            });
            return { count, __typename: 'Test' };
        },
    },

这是从我的其他组件中调用的，就像这样：

<Query
    query={Queries.getAllData}
    variables={{
        date: date,
        ids: ids,
    }}
    //pollInterval={500}
>
    {({
        loading,
        error,
        data,
    }: QueryResult<{ getAllData: { count: number } }>) => {
        const count=
            data && data.getAllData && data.getAllData.count;

        return (
            <li className="actions__group">
                <div className="actions__item">
                    <Button
                        className={'button button--fill-green'}
                        onClick={this.onAction}
                        children={
                            count? (
                                <span className="button__badge">
                                    {count}
                                </span>
                            ) : (
                                undefined
                            )
                        }
                        disabled={count=== 0}
                    />
                </div>
            </li>
        );
    }}
</Query>

我遇到的问题是，当缓存数据发生突变（第一个组件更新正常）时，第二个Query组件（带有getAllData查询的组件）不会重新呈现。一切似乎都已正确连接（当我打开轮询第二个组件时，将重新正确渲染）。

重新渲染查询组件时有哪些规则？我看不到为什么第一个组件会重新渲染，而第二个组件却不会。

关于重新呈现Apollo查询组件的规则是什么？

0 个答案: