Graphql 使用writeFragment更新属于对象的字段？

我正在尝试让我的第一个

写回忆录

工作

以下是对象形状：

resolutions {
  _id
  name
  completed
  goals {
    _id
    name
    completed
  }
}

我刚刚在客户端上运行了一个变种，它成功地添加了一个新的

目标

，现在我正在尝试让客户端页面自动更新并显示刚刚添加的新目标

我的

readFragment

正在工作。它成功地读入了决议。我读的是决议，而不是目标，因为作为属于决议的一个字段，目标没有自己的id

这是我的

update

函数，显示

readFragment

和

writeFragment

：

{
设resId='Resolution:'+resolutionId；
const theRes=cache.readFragment({
id:resId，
碎片：获得碎片目标，
});
theRes.goals=theRes.goals.concat（[createGoal]）//

…下面是片段的gql：

   const GET_FRAGMENT_GOAL = gql`
    fragment targetRes on resolutions {
      name
      completed
      goals {
        _id
        name
        completed
      }
    }
  `;


  const SET_FRAGMENT_GOAL = gql`
    fragment targetGoal on resolutions {
      __typename
      goals
    }
  `;

我得到一个控制台错误：

您使用的是简单（启发式）片段匹配器，但查询包含联合或接口类型

Apollo客户端将无法准确映射片段。若要消除此错误，请使用文档中描述的内省片段匹配器：

我读了《内省碎片匹配器》一书，对我的情况来说，这似乎是一个巨大的杀伤力。看来我在做别的错事。这是我同时遇到的另一个错误：

未捕获（承诺中）TypeError:无法读取未定义的属性“data”

---

我叫writeFragment有什么问题？

经过几个小时的学习，我学到了很多关于碎片的知识

我让它工作了。以下是更新的片段和查询定义：

import gql from "graphql-tag";

let resolutionQueryFragments = {
    goalParts: gql`
    fragment goalParts on Goal {
        _id
        name
        completed
    }
  `,
};


resolutionQueryFragments.resolutionGoals = gql`
    fragment resolutionGoals on Resolution {
        goals{
            _id
            name
            completed   
        }
    }
`;

const GET_RESOLUTIONS = gql`
  query Resolutions {
    resolutions {
      _id
      name
      completed
      ...resolutionGoals
    }
     user {
      _id
    }
  }
  ${resolutionQueryFragments.resolutionGoals}
`;

const CREATE_RESOLUTION = gql`
    mutation createResolution($name: String!) {
      createResolution(name: $name) {
        __typename
        _id
        name
        ...resolutionGoals
        completed
      }
    }
    ${resolutionQueryFragments.resolutionGoals}
`;

const GET_RESOLUTIONS_FOR_MUTATION_COMPONENT = gql`
  query Resolutions {
    resolutions {
      _id
      name
      completed
      ...resolutionGoals
    }
  }
     ${resolutionQueryFragments.resolutionGoals}
`;

const CREATE_GOAL = gql`
  mutation createGoal($name: String!, $resolutionId: String!) {
    createGoal(name: $name, resolutionId: $resolutionId) {
        ...goalParts
      }
  }
     ${resolutionQueryFragments.goalParts}
`;

export {resolutionQueryFragments, GET_RESOLUTIONS, GET_RESOLUTIONS_FOR_MUTATION_COMPONENT, CREATE_RESOLUTION, CREATE_GOAL}

…以下是更新的突变成分：

import React, {Component} from "react";
import gql from "graphql-tag";
import {graphql} from "react-apollo";
import {Mutation} from "react-apollo";
import {withApollo} from "react-apollo";
import {resolutionQueryFragments, CREATE_GOAL} from '../../imports/api/resolutions/queries';

const GoalForm = ({resolutionId, client}) => {
    let input;

    return (
        <Mutation
            mutation={CREATE_GOAL}
            update={(cache, {data: {createGoal}}) => {
                let resId = 'Resolution:' + resolutionId;
                let currentRes = cache.data.data[resId];
                let theGoals = cache.readFragment({
                    id: resId,
                    fragment: resolutionQueryFragments.resolutionGoals
                });
                theGoals = theGoals.goals.concat([createGoal]);
                cache.writeFragment({
                    id: resId,
                    fragment: resolutionQueryFragments.resolutionGoals,
                    data: {goals: theGoals}
                });
            }}
        >
            {(createGoal, {data}) => (
                <div>
                    <form
                        onSubmit={e => {
                            e.preventDefault();
                            createGoal({
                                variables: {
                                    name: input.value,
                                    resolutionId: resolutionId
                                }
                            });
                            input.value = "";
                        }}
                    >
                        <input
                            ref={node => {
                                input = node;
                            }}
                        />
                        <button type="submit">Submit</button>
                    </form>
                </div>
            )}
        </Mutation>
    )
        ;
};

export default withApollo(GoalForm);

import React，{Component}来自“React”；
从“graphql标签”导入gql；
从“react apollo”导入{graphql}；
从“反应阿波罗”中导入{突变}；
从“react apollo”导入{withApollo}；
从“../../imports/api/resolutionQueryFragments，CREATE_GOAL}”导入{resolutionQueryFragments，CREATE_GOAL}；
const GoalForm=（{resolutionId，client}）=>{
让输入；
返回(
{
设resId='Resolution:'+resolutionId；
设currentRes=cache.data.data[resId]；
让目标=cache.readFragment({
id:resId，
片段：resolutionQueryFragments.ResolutionOALS
});
theGoals=theGoals.goals.concat（[createGoal]）；
cache.writeFragment({
id:resId，
片段：resolutionQueryFragments.ResolutionOals，
数据：{goals:theGoals}
});
}}
>
{（createGoal，{data}）=>(
{
e、 预防默认值（）；
创建目标({
变量：{
名称：input.value，
resolutionId：resolutionId
}
});
input.value=“”；
}}
>
{
输入=节点；
}}
/>
提交
)}
)
;
};
使用Apollo导出默认值（目标格式）；

也许应该将

目标的子字段添加到
设置片段\目标
中，就像在
获取片段\目标
中一样？