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

Question

我正在努力让我的第一个writeFragment工作。

这是对象形状：

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

我刚刚在客户端上运行了一个成功添加 new 的突变goal，现在我试图让客户端页面自动更新并显示刚刚添加的新目标。

我有readFragment工作。它成功读入决议。我正在阅读决议，而不是目标，因为作为属于决议的领域，目标没有自己的 id。

这是我的update函数，显示readFragment和writeFragment：

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

...这是片段的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 Client 将无法准确映射片段。要消除此错误，请按照文档中的说明使用 IntrospectionFragmentMatcher：http : //dev.apollodata.com/react/initialization.html#fragment-matcher

我阅读了 IntrospectionFragmentMatcher，对于我的情况来说，它看起来有点过头了。看来我做错了什么。这是我同时遇到的另一个错误：

未捕获（承诺）类型错误：无法读取未定义的属性“数据”

我对 writeFragment 的调用有什么问题？

Answer 1

经过几个小时的学习，我对fragment有了很多了解！

我成功了。以下是更新的片段和查询定义：

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}

...这是更新的 Mutation 组件：

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);