突变通过 react-adopt 触发两次

Posted 2023-03-08

【中文标题】突变通过 react-adopt 触发两次

【英文标题】：Mutation fires twice with 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,
  
)

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

【参考方案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。

他们为什么要互换？用我的例子还是一般？