Apollo React 嵌套查询和变异答案

【问题标题】：Apollo React Nested Query & MutationApollo React 嵌套查询和变异
【发布时间】：2019-04-24 08:28:50
【问题描述】：

我有一个组件，我想获取配置文件的数据并允许在同一视图上发布消息。我在这里创建了一个简单的配置文件组件，并在查询中设置了突变，类似于the Apollo React tutorial。

当我运行它时，我会得到一个带有数据的正确呈现的查询。按下按钮时，会发生突变，但页面会在 Query 的 data 参数中使用空对象重新呈现，并且页面会出现 Cannot read property 'name' of undefined 错误（在给定空白 data 对象的情况下，这是预期的） .

这里有更好的方法吗？

const GET_PROFILE = gql`
  query GetProfileQuery($profileId: ID!) {
    getProfileInfo(profileId: $profileId) {
      name
    }
  }
`;

const ADD_ENDORSEMENT = gql`
  mutation AddEndorsement($profileId: ID!, $body: String!) {
    addEndorsement(profileId: $profileId, body: $body) {
      endorsementId
    }
  }
`;

const Profile = props => {
  const profileId = props.match.params.profileId;
  return (
    <Query query={GET_PROFILE} variables={{ profileId: profileId }}>
      {({ loading, error, data }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;
        return (
          <Fragment>
            <h1>Welcome {data.getProfileInfo.name}</h1>
            <Mutation mutation={ADD_ENDORSEMENT}>
              {(addEndorsement, { loading, error }) => (
                <div>
                  <button
                    onClick={e => {
                      addEndorsement({
                        variables: {
                          profileId: profileId,
                          body: "This is a test."
                        }
                      });
                    }}
                  >
                    Save
                  </button>
                  {loading && <p>Loading...</p>}
                  {error && <p>Error :(</p>}
                </div>
              )}
            </Mutation>
          </Fragment>
        );
      }}
    </Query>
  );
};

【问题讨论】：

apollographql.com/docs/react/recipes/recompose.html

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

我遇到了类似的问题，即数据未定义。在我的情况下，问题是由 Query subscribeToMore 选项引起的，我正在使用通过静默未能将更新的数据合并到原始查询结果中来使缓存无效（它不包含完全相同的数据字段）。

这个问题没有提到订阅，但它会是一个类似的缓存失效问题。

要解决此问题，我首先尝试确保查询和突变返回相同的数据。

如果这不能解决，那么根据响应需要查看“refetchQueries/awaitRefetchQueries”以刷新查询，或者使用 Mutation 上的 "update" 选项手动将更新的数据插入本地缓存。

祝你好运。

【讨论】：

【解决方案2】：

尝试将以下内容添加到 onClick 突变，它应该有助于避免需要手动更新缓存，尽管这将是下一步。您可以只将查询的字符串名称传递给refetchQueries，您不需要在那里传递实际的查询。另一个技巧是确保您获取相同的字段，以便缓存对象匹配，（不确定您在查询/变异中返回的类型。

onClick={e => {
  addEndorsement({
    variables: {
      profileId: profileId,
      body: 'This is a test.',
    },
    refetchQueries: ['GetProfileQuery']
  })
}}

【讨论】：

但这一次会完成2个网络请求。所以我不认为这是最好的做法..!!