【问题标题】：Mutation fires twice with react-adopt突变通过 react-adopt 触发两次
【发布时间】：2019-12-12 17:08:11
【问题描述】：

我正在使用react-adopt 和react-apollo。这样做的简单原因是，在单个页面上有大量查询和突变会变得非常混乱。

问题

当触发mut1 时，只会发生一种突变。
当mut2 触发时，mut2 触发，然后mut1 在mut2 完成后触发。
如果我有一个mu3,4,5 etc 并单击mut3，它将运行mut3 > mut2and
最后的mut1 如果你运行mut5，那么它会运行4 > 3 > 2 > 1 等等...

组件

const mut1 = () => {
  return (
    <Mutation mutation={MUTATION} {...props} />
  )
}
const mut2 = () => {
  return <Mutation mutation={MUTATION2} {...props} />
}
export default
  adopt({
    mut1,
    mut2,
  }
)

我当然希望每个突变在点击时只触发一次。

【问题讨论】：

标签： javascript reactjs graphql react-apollo react-adopt

【解决方案1】：

创建MutationContainer.js，其中包含您所有的突变导出 MutationContainer 作为变量

import { gql } from 'apollo-boost'
import { adopt } from 'react-adopt'

const mutation1 = () => (
  <Mutation mutation={MUTATION1} {...props} />
)
const mutation2 = () => (
  <Mutation mutation={MUTATION2} {...props} />
)
const mutation3 = () => (
  <Mutation mutation={MUTATION3} {...props} />
)
export const MutationContainer = adopt({
  mutation1,
  mutation2,
  mutation3
})

将它导入到您要使用此突变的任何组件上

在您的 Component1.jsx 上

import { adopt } from 'react-adopt'
import { Value } from 'react-powerplug'

import { MutationContainer } from './MutationContainer'

const Composed = adopt({
  input: <Value initial="" />,
  container: <MutationContainer />,
})

export const Component1 = () => (
  <Composed>
    {({ container: { mutation1 }, input }) => {
      const handleAdd = ev => {
        mutation1.mutation({ variables: { ...variables } })
        input.setValue('')
        ev.preventDefault()
      }
      return (
        <Form onSubmit={handleAdd}>
          <Input
            type="text"
            value={input.value}
            onChange={ev => input.setValue(ev.target.value)}
          />
          <Button type="submit">Let's call mutation1</Button>
        </Form>
      )
    }}
  </Composed>
)

在 Component2.jsx 上

import { adopt } from 'react-adopt'
import { Value } from 'react-powerplug'
import { MutationContainer } from './MutationContainer'

const Composed = adopt({
  input: <Value initial="" />,
  container: <MutationContainer />,
})

export const Component2 = () => (
  <Composed>
    {({ container: { mutation2, mutation3 }, loading }) => {

      const handleMutation2 = async () => {
        await mutation2.mutation({ variables: { ...variables } })
      }
      const handleMutation3 = async () => {
        await mutation3.mutation({ variables: { ...variables } })
      }
      return (
        <React.Fragment>
          <Button onClick={handleMutation2}>
           Let's call mutation2
          </Button>
          <Button onClick={handleMutation3}>
            Let's call mutation3
          </Button>
        <React.Fragment>
      )
    }}
  </Composed>
)

请按照您的要求处理变量

根据你的情况，最重要的一点

export const App = () => (
  <MutationContainer>
    {({ data: { loading, data } }) => (
        <React.Fragment>
         <Component1  {...this.props }/>
         <Component2 {...this.props } />
        </React.Fragment>
    )}
  </MutationContainer>
)

如果您仍然存在此问题，请告诉我。将尝试使用新方法 react-adopt。

【讨论】：

感谢您抽出宝贵时间为我填写此信息。我会说，似乎会发生同样的问题，只是您将突变移动到它们自己的容器中。我不明白为什么这会有所作为，但我会试一试，看看这能把我带到哪里。你能解释一下为什么你认为这会有所作为吗？
我以为当你点击mutation1它也会在内部调用mutation2，mutation3等等，没有任何条件。当我们创建自己的容器时，我们将突变分开调用或一次一个突变。它对我有用。但我没有你这样的问题。感到抱歉。谢谢
不，当您单击一个时，它会毫无问题地触发一个。请重新阅读问题:) 当您点击 1 时，1 触发，当您单击 2 时，2 触发，完成然后 1 触发。
它们在点击mutation2时互换，完成时调用mutation1。
他们为什么要互换？用我的例子还是一般？