Question

我试图让我的第一个writeFragment工作。

这里是对象形状：

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

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

我readFragment正在工作。它成功读入了分辨率。我正在阅读决议，而不是目标，因为作为一个属于解决方案的领域，目标不具有自己的ID。

这是我的update功能，显示readFragment和writeFragment：

    <Mutation
        mutation={CREATE_GOAL}
        update={(cache, {data: {createGoal}}) => {
            let resId = 'Resolution:' + resolutionId;
            const theRes = cache.readFragment({
                id: resId,
                fragment: GET_FRAGMENT_GOAL
            });
            theRes.goals = theRes.goals.concat([createGoal]); //<== THIS WORKS
            cache.writeFragment({
                id: resId,
                fragment: SET_FRAGMENT_GOAL,
                data: {__typename: 'Resolution', goals: theRes.goals}
            });
        }}
    >

...这里是片段的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客户端将无法准确映射片段。要使此错误消失，请使用文档中描述的IntrospectionFragmentMatcher：http://dev.apollodata.com/react/initialization.html#fragment-matcher

我读到了IntrospectionFragmentMatcher，对于我的情况来说，它看起来像是超级重击。看来我做错了什么。这是我在同一时间得到的另一个错误：

未捕获（承诺）TypeError：无法读取属性＆＃39;数据＆＃39;未定义的

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

Answer 1

经过几个小时的学习，我学会了一些关于片段的很多！

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

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

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

1 个答案: