我如何处理 react-apollo 中的删除

Question

我有一个像这样的突变

mutation deleteRecord($id: ID) {
  deleteRecord(id: $id) {
    id
  }
}

在另一个位置，我有一个元素列表。

我可以从服务器返回更好的东西吗？我应该如何更新列表？

更一般地说，在 apollo/graphql 中处理删除的最佳实践是什么？

原文由 derekdreery 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不确定这是 _好的实践风格_，但这是我如何使用 updateQueries 处理 react-apollo 中的项目删除：

 import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import update from 'react-addons-update';
import _ from 'underscore';

const SceneCollectionsQuery = gql `
query SceneCollections {
  myScenes: selectedScenes (excludeOwner: false, first: 24) {
    edges {
      node {
        ...SceneCollectionScene
      }
    }
  }
}`;

const DeleteSceneMutation = gql `
mutation DeleteScene($sceneId: String!) {
  deleteScene(sceneId: $sceneId) {
    ok
    scene {
      id
      active
    }
  }
}`;

const SceneModifierWithStateAndData = compose(
  ...,
  graphql(DeleteSceneMutation, {
    props: ({ mutate }) => ({
      deleteScene: (sceneId) => mutate({
        variables: { sceneId },
        updateQueries: {
          SceneCollections: (prev, { mutationResult }) => {
            const myScenesList = prev.myScenes.edges.map((item) => item.node);
            const deleteIndex = _.findIndex(myScenesList, (item) => item.id === sceneId);
            if (deleteIndex < 0) {
              return prev;
            }
            return update(prev, {
              myScenes: {
                edges: {
                  $splice: [[deleteIndex, 1]]
                }
              }
            });
          }
        }
      })
    })
  })
)(SceneModifierWithState);

原文由 vwrobel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个没有 underscore.js 的类似解决方案。它在版本 2.1.1 中使用 react-apollo 进行了测试。并为删除按钮创建一个组件：

 import React from "react";
import { Mutation } from "react-apollo";

const GET_TODOS = gql`
{
    allTodos {
        id
        name
    }
}
`;

const DELETE_TODO = gql`
  mutation deleteTodo(
    $id: ID!
  ) {
    deleteTodo(
      id: $id
    ) {
      id
    }
  }
`;

const DeleteTodo = ({id}) => {
  return (
    <Mutation
      mutation={DELETE_TODO}
      update={(cache, { data: { deleteTodo } }) => {
        const { allTodos } = cache.readQuery({ query: GET_TODOS });
        cache.writeQuery({
          query: GET_TODOS,
          data: { allTodos: allTodos.filter(e => e.id !== id)}
        });
      }}
      >
      {(deleteTodo, { data }) => (
        <button
          onClick={e => {
            deleteTodo({
              variables: {
                id
              }
            });
          }}
        >Delete</button>
      )}
    </Mutation>
  );
};

export default DeleteTodo;

原文由 sinned 发布，翻译遵循 CC BY-SA 3.0 许可协议