Apollo GraphQL客户端不会在查询中返回缓存的嵌套类型

时间:2019-09-11 22:20:10

标签: apollo apollo-client apollo-cache-inmemory

我正在执行查询以获取PowerMeter的详细信息,其中包含称为Project的另一种类型。我这样写查询:

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

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

我该如何解决这个问题?

此外,我打电话给readFragment来检查如何将powerMeter保存在缓存中,并且响应显示powerMeter已保存project

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:获取策略详细信息

当我使用fetchPolice等于cache-firstnetwork-only时,错误仍然存​​在。当我使用no-cache时,我没有得到错误。

0 个答案:

没有答案