react-apollo 的动态突变文档
Dynamic mutation document for react-apollo
我需要动态更改我的变更文档,以便能够在单个变更中创建多个项目。所以我有这个函数 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,但我需要它更灵活以便我可以创建任意数量的项目...
我不确定我是否可以用你当前的实现来回答你的问题,所以我会敦促你重新考虑你的突变定义并使用 GraphQLList
和 GraphQLInputObject
。
因此,根据您需要改变的字段:
args: {
input: {
type: new GraphQLList(new GraphQLInputObjectType({
name: 'inputObject',
description: 'Your description here',
fields: {
id: { type: GraphQLInt }
},
})),
},
},
通过这种方式,您可以将 n-number 个对象提供到您的 mutate 调用中,并获得关于您的类型的列表:
{
mutation myMutation {
addToOrderMenuItemConnection(input: [{ id: 123 }, { id: 456 }]) {
id
}
}
}
同样,我不是 100% 熟悉您的 end-goal,但我认为这也会为您提供未来 changes/updates 的灵活性,因为您处理的是对象输入而不是个别论点,这也(希望)使您免受未来的影响 breaking-changes.
这听起来像是您正在使用的后端的不幸限制。进行批量变更的正确方法是在服务器上有一个单一的变更字段,该字段接受一个列表参数,其中包含您要插入的所有项目。因此,Apollo 并不是为了支持使用标准 react-apollo
API 的动态查询生成而设计的。那是因为我们坚信使用静态查询比在运行时生成字段要好得多:https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a#.hp710vxe7
不过,考虑到这种情况,听起来动态生成变异字符串是一个不错的选择。您可以直接使用 Apollo 而不是通过 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
顺便说一句的文档:http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate
我需要动态更改我的变更文档,以便能够在单个变更中创建多个项目。所以我有这个函数 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,但我需要它更灵活以便我可以创建任意数量的项目...
我不确定我是否可以用你当前的实现来回答你的问题,所以我会敦促你重新考虑你的突变定义并使用 GraphQLList
和 GraphQLInputObject
。
因此,根据您需要改变的字段:
args: {
input: {
type: new GraphQLList(new GraphQLInputObjectType({
name: 'inputObject',
description: 'Your description here',
fields: {
id: { type: GraphQLInt }
},
})),
},
},
通过这种方式,您可以将 n-number 个对象提供到您的 mutate 调用中,并获得关于您的类型的列表:
{
mutation myMutation {
addToOrderMenuItemConnection(input: [{ id: 123 }, { id: 456 }]) {
id
}
}
}
同样,我不是 100% 熟悉您的 end-goal,但我认为这也会为您提供未来 changes/updates 的灵活性,因为您处理的是对象输入而不是个别论点,这也(希望)使您免受未来的影响 breaking-changes.
这听起来像是您正在使用的后端的不幸限制。进行批量变更的正确方法是在服务器上有一个单一的变更字段,该字段接受一个列表参数,其中包含您要插入的所有项目。因此,Apollo 并不是为了支持使用标准 react-apollo
API 的动态查询生成而设计的。那是因为我们坚信使用静态查询比在运行时生成字段要好得多:https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a#.hp710vxe7
不过,考虑到这种情况,听起来动态生成变异字符串是一个不错的选择。您可以直接使用 Apollo 而不是通过 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
顺便说一句的文档:http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate