在 apollo-client 中使用 optimiticResponse 执行突变时如何解决“缺失字段”警告?

Wim*_*iel 7 appsync-apollo-client

我正在将 aws-appsync 与 apollo-client 一起使用,当我尝试在不提供所有字段的情况下执行突变时,会收到类似“{...} 中缺少字段 x”的警告。我真的需要提供所有(包括可选)字段吗?我该如何优雅地处理这个问题?

我想知道这是预期的行为还是我遗漏了一些明显的东西。我不想保持必须传递所有可选字段并将这些字段作为空值存储在数据库中的额外复杂性。我想,因为它们只是警告,所以我会忽略它们,但我发现更新将在数据库中执行,但是 inmemorycache 缓存不会总是更新。它有时会显示更新,有时不会。

import {compose, graphql} from "react-apollo";
import gql from "graphql-tag";
import React from "react";

export const EditCard = (props) => {
        const handleSave = () => {
            props.update({
                givenName :'someGivenName',
                //middleName omitted on purpose 
                familyName :'someFamilyName',
            });
        };
    return (
        <>...more stuff here...</>
    );
};

export const card = gql`
    fragment card on Identity{
        givenName
        middleName
        familyName
    }
`;

export const CardsGraphQL = gql`
    query GerCards {
        cards: listIdentitys(filter: {type: {eq: "CARD"}}) {
            items {
                ...card
            }
        }
    }
    ${card}
`;

export const UpdateCardGraphQL = gql`
    mutation UpdateCard($input: UpdateIdentityInput!) {
        updateObject: updateIdentity(input: $input) {
            ...card
        }
    }
    ${card}
`;


export const selectConfig = () => {
    return {
        options: {
            fetchPolicy: 'cache-and-network',
        },
        props: (props) => {
            return {
                cards: props.data.cards ? props.data.cards.items : [],
            };
        },
    };
};

export const updateConfig = (query) => {
    return {
        options: {
            update: (cache, {data: {updateObject}}) => {

                // Read query from cache
                const data = cache.readQuery({query});

                // Add updated object to the cache
                data.cards.items = data.cards.items.map(item => item.id === updateObject.id ? updateObject : item);

                //Overwrite the cache with the new results
                cache.writeQuery({query, data});

            },
        },
        props: (props) => {
            return {
                update: (input) => {
                    props.mutate({
                        variables: {input},
                        optimisticResponse: () => ({
                            updateObject: input,
                        }),
                    });
                },
            };
        },
    };
};

export default compose(
    graphql(CardsGraphQL, selectConfig),
    graphql(UpdateCardGraphQL, updateConfig(CardsGraphQL)))
(EditCard);



Run Code Online (Sandbox Code Playgroud)

对于 GraphQL,这种突变似乎可以正常运行,并且 dynamoDB 中的结果正是我所期望的:

{ givenName :'someGivenName', familyName :'someFamilyName' }

然而,缓存并不总是用突变结果更新,并且 apollo-client 显示警告:

“{... 中缺少中间名字段”

如果我添加 middleName 字段,警告消失并且缓存正确更新,但 dynamoDB 中的结果是:

{ givenName :'someGivenName', middleName : null, familyName :'someFamilyName' }

这种方法给我的客户带来了额外的复杂性,我希望避免维护。

还有其他人有这个问题吗?如何优雅地解决这个问题?

任何帮助表示赞赏。