react-apollo的动态变异文档

Question

我需要动态更改我的突变文档，以便能够在单个突变中创建多个项目。所以我有这个函数createOrderName，它接受一个整数，并且能够创建正确的突变文档。例如：createOrderName(2)获取

mutation createOrderMut($input0: AddToOrderMenuItemConnectionInput!, $input1: AddToOrderMenuItemConnectionInput!) {
  input0: addToOrderMenuItemConnection (input:$input0) {
    changedOrderMenuItem {
      id
    }
  }
  input1: addToOrderMenuItemConnection (input:$input1) {
    changedOrderMenuItem {
      id
    }
  }
}

我的容器如下所示。

const CartContainer = compose(
  graphql(createOrderName(2), {
    props: ({ mutate }) => ({
      addToOrderMenuItem: (menus, orderId) => mutate({
        variables: createOrdersInput(menus, orderId)
      })
    })
  })
)(CartView)

现在，我如何将一个整数值传递给这个突变，以便它创建正确的突变文档？目前修复为2，但我需要它更灵活，以便我可以创建任意数量的项目……

Answer 1

这听起来像是你正在使用的后端的一个不幸的限制。进行批量突变的正确方法是在服务器上有一个突变字段，该字段接受一个列表参数，其中包含您想要插入的所有项。因此，Apollo不支持使用标准的react-apollo应用程序接口生成这样的动态查询。这是因为我们坚信使用静态查询比在运行时生成字段要好得多：https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a#.hp710vxe7

然而，考虑到这种情况，动态生成突变字符串听起来是一个很好的选择。您可以直接使用阿波罗来完成此操作，而不是通过graphql HoC。您可以使用withApollo HoC执行此操作：http://dev.apollodata.com/react/higher-order-components.html#withApollo

import { withApollo } from 'react-apollo';

const MyComponent = ({ client }) => {
  function mutate() {
    const dynamicMutationString = // generate mutation string here

    client.mutate({
      mutation: gql`${dynamicMutationString}`,
      variables: { ... },
    }).then(...);
  }

  return <button onClick={mutate}>Click here</button>;
}

const MyComponentWithApollo = withApollo(MyComponent);

我们构建这个额外的API就是为了这个目的--当标准的东西不够的时候。

以下是mutate btw：http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate的文档

Answer 2

我不确定我是否可以用您当前的实现来回答您的问题，所以我将敦促您重新考虑您的突变定义，并使用GraphQLList和GraphQLInputObject。

因此，根据您需要更改的字段：

args: {
  input: {
    type: new GraphQLList(new GraphQLInputObjectType({
      name: 'inputObject',
      description: 'Your description here',
      fields: {
        id: { type: GraphQLInt }
      },
    })),
  },
},

通过这种方式，您可以在您的mutate调用中提供n个对象，并获得有关您的类型的列表：

{
  mutation myMutation {
    addToOrderMenuItemConnection(input: [{ id: 123 }, { id: 456 }]) {
      id
    }
  }
}

再说一次，我不是100%熟悉你的最终目标，但我认为这将为你未来的更改/更新提供灵活性，因为你正在处理对象输入，而不是单个参数，这也(希望)使你不受未来破坏性更改的影响。