3

我正在执行查询以获取PowerMeter详细信息,其中包含名为Project. 我这样写查询:

query getPowerMeter($powerMeterId: ID!) {
    powerMeter: powerMeter(powerMeterId: $powerMeterId) {
        id
        name
        registry
        project {
            id
            name
        }
    }
}

当我第一次执行查询时,project成功返回。问题是,当我使用相同的参数和默认值fetchPolicy( cache-first) 执行后续查询时,project不再返回。

我该如何解决这个问题?

另外,我打电话readFragment检查如何powerMeter保存在缓存中,响应显示powerMeterproject保存。

const frag = client.readFragment({
    fragment: gql`
        fragment P on PowerMeter {
            id
            name
            registry
            project {
                id
                name
            }
        }
    `,
    id: 'PowerMeter:' + powerMeterId,
});

功率计第一次返回

{
  "powerMeter":{
    "id":"7168adb4-4198-443e-ab76-db0725be2b18",
    "name":"asd123123",
    "registry":"as23",
    "project":{
      "id":"41d8e71b-d1e9-41af-af96-5b4ae9e492c1",
      "name":"ProjectName",
      "__typename":"Project"
    },
    "__typename":"PowerMeter"
  }
}

第一次调用功率计后的片段

{
  "id":"7168adb4-4198-443e-ab76-db0725be2b18",
  "name":"asd123123",
  "registry":"as23",
  "project":{
    "id":"41d8e71b-d1e9-41af-af96-5b4ae9e492c1",
    "name":"ProjectName",
    "__typename":"Project"
  },
  "__typename":"PowerMeter"
}

功率计第二次返回

{
  "powerMeter":{
    "id":"7168adb4-4198-443e-ab76-db0725be2b18",
    "name":"asd123123",
    "registry":"as23",
    "__typename":"PowerMeter"
  }
}

第二次调用功率计后的片段

{
  "id":"7168adb4-4198-443e-ab76-db0725be2b18",
  "name":"asd123123",
  "registry":"as23",
  "project":{
    "id":"41d8e71b-d1e9-41af-af96-5b4ae9e492c1",
    "name":"ProjectName",
    "__typename":"Project"
  },
  "__typename":"PowerMeter"
}

编辑 1:获取查询

下面的代码是我获取数据的方式。我正在使用useApolloClient而不是查询挂钩,因为我正在使用 AWS AppSync,但它还不支持查询挂钩。

import { useApolloClient } from '@apollo/react-hooks';
import gql from 'graphql-tag';
import { useEffect, useState } from 'react';

export const getPowerMeterQuery = gql`
    query getPowerMeter($powerMeterId: ID!) {
        powerMeter: powerMeter(powerMeterId: $powerMeterId) {
            id
            name
            registry
            project {
                id
                name
            }
        }
    }
`;

export const useGetPowerMeter = (powerMeterId?: string) => {
    const client = useApolloClient();
    const [state, setState] = useState<{
        loading: boolean;
        powerMeter?: PowerMeter;
        error?: string;
    }>({
        loading: true,
    });

    useEffect(() => {
        if (!powerMeterId) {
            return setState({ loading: false });
        }

        client
            .query<GetPowerMeterQueryResponse, GetPowerMeterQueryVariables>({
                query: getPowerMeterQuery,
                variables: {
                    powerMeterId,
                },
            })
            .then(({ data, errors }) => {
                if (errors) {
                    setState({ loading: false, error: errors[0].message });
                }

                console.log(JSON.stringify(data));

                const frag = client.readFragment({
                    fragment: gql`
                        fragment P on PowerMeter {
                            id
                            name
                            registry
                            project {
                                id
                                name
                            }
                        }
                    `,
                    id: 'PowerMeter:' + powerMeterId,
                });

                console.log(JSON.stringify(frag));

                setState({
                    loading: false,
                    powerMeter: data.powerMeter,
                });
            })
            .catch(err => setState({ loading: false, error: err.message }));
    }, [powerMeterId]);

    return state;
};

编辑 2:获取策略详细信息

当我使用fetchPoliceequalscache-firstnetwork-only时,错误仍然存​​在。当我使用时no-cache,我没有收到错误。

4

1 回答 1

0

我认为这可能是解决方案: https ://github.com/apollographql/apollo-client/issues/7050

可能为时已晚,但它可以帮助人们在未来解决这个问题。

当使用 apollo 客户端的 InMemoryCache 时,您似乎需要提供可能类型的列表,以便在使用 InMemoryCache 时可以正确完成片段匹配。

当联合类型很少且 API 非常稳定且不会经常更改时,您可以手动执行此操作。或者您自动将这些类型生成到一个 json 文件中,您可以直接在 InMemoryCache 的 possibleTypes 配置中直接使用该文件。

访问官方文档的此链接以了解如何操作。

干杯。

于 2021-08-24T08:17:34.083 回答