如何使用 Apollo 突变查找要删除的行索引答案

【问题标题】：How to find index of row to delete using Apollo mutation如何使用 Apollo 突变查找要删除的行索引
【发布时间】：2018-03-25 14:03:31
【问题描述】：

我使用react-table 和GraphQL query 将所有帐户显示到表格中。现在我想使用删除突变来删除 1 个帐户。但是，我不知道如何找到该行的索引/帐户id，以便我可以删除该行！我的用户界面是这样的：

ShowAccount.js

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { Button, Icon } from 'semantic-ui-react';
import ReactTable from 'react-table';
import DeleteAccountWithData from './DeleteAccount'

const columns = [
  {
    Header: 'ADMIN',
    columns: [
      {
        Header: 'Id',
        accessor: 'id',
        width: 70,
      },
      {
        Header: 'First Name',
        accessor: 'firstName',
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
      },
      {
        Header: 'Address',
        accessor: 'address',
        width: 450,
      },
      {
        Header: 'Email',
        accessor: 'email',
        width: 250,
      },
      {
        Header: 'Phone',
        accessor: 'mobile',
      },
    ],
  },
];

class ShowAccount extends React.Component {
  render() {
    const { data } = this.props;
    return (
      <div>
        <ReactTable
          data={data.GetAllAccounts}
          columns={columns}
          defaultPageSize={10}
          className="-highlight"
          SubComponent={row =>
            <div style={{ padding: '10px' }}>
              <DeleteAccountWithData />
            </div>}
        />
      </div>
    );
  }
}

export const queryAccountList = gql`
  query GetAllAccounts {
    GetAllAccounts {
      id
      firstName
      lastName
      address
      email
      mobile
    }
  }
`;

const AccountListWithData = graphql(queryAccountList)(ShowAccount);

export default AccountListWithData;

删除帐户.js

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { queryAccountList } from './ShowAccount'

class DeleteAccount extends React.Component {
  constructor(props) {
    super(props);
  }
  onDeleteAccount = () => {
    this.props
      .mutate({
        refetchQueries: [{
          query: queryAccountList
        }],
        variables: {
          id: 2 // my problem here: just delete row with id 2
        },
      })
      .then(({ data }) => {
        console.log('mutation deleteAccount: SUCCESS', data);
      })
      .catch(error => {
        console.log('mutation deleteAccount: ERROR', error);
      });
  }
  render() {
    return (
      <div>
        <button onClick={this.onDeleteAccount}>Delete</button>
      </div>
    );
  }
}

const mutationDeleteAccount = gql`
  mutation deleteAccount($id: Int) {
    deleteAccount(id: $id) {
      id
    }
  }
`;

const DeleteAccountWithData = graphql(mutationDeleteAccount)(DeleteAccount);

export default DeleteAccountWithData;

【问题讨论】：

标签： reactjs graphql apollo-client

【解决方案1】：

您需要通过更新商店来响应成功的突变。 Apollo 允许您使用 update 来执行此操作。

https://www.apollographql.com/docs/react/features/cache-updates.html#directAccess

简而言之，mutate 接受更新属性，该属性提供对存储的访问以进行直接缓存更新。类似以下的内容应该会为您指明正确的方向。

this.props.mutate({
  variables: {
    id: 2
  },
  update: (store, { data: { submitComment } }) => {
    // Read the data from our cache for this query.
    const data = store.readQuery({ query: queryAccountList });
    // Filter the out just the account with the deleted id.
    const nextData = data.GetAllAccounts.filter(({ id }) => id !== 2)
    // Write our data back to the cache.
    store.writeQuery({ query: queryAccountList, data: nextData });
  }
})

【讨论】：

其实我是用refetchQueries来更新商店的。我想要的是，当我单击删除按钮时，它会找到该行的 id 并准确删除它。但是，在我的代码中它只能删除一个特定的 id。

【解决方案2】：

删除函数示例请看以下代码，我将它用于我的项目，效果很好。

_delete = async (id) => {

    this.setState({ isLoading: true})

    let ret = await this.props.deleteUserMutation({
      variables: {
        id
      },
      update: (store, { data: { createUser } }) => {

        const data = store.readQuery({ query: ALL_USERS_QUERY })
        let index = -1;
        const newUserList = data.allUsers.find((user,i ) => {
          if(user.id === id){
            index = i;
            return i;
          }
        })
        if (index > -1) {
            data.allUsers.splice(index, 1);
        }

        store.writeQuery({ query: ALL_USERS_QUERY, data })
      }
    })
    this.setState({ isLoading: false})

  }

以下参考教程链接： http://nobrok.com/react-native-and-graphql-crud-operation/

【讨论】：