反应采用突变两次

Question

I am using react-adopt with react-apollo . The simple reason for this is that having a large number of queries and mutations on a single page gets very messy.

Issue

• When firing mut1 only one mutation will happen.
• When firing mut2 , mut2 fires and then mut1 fires once mut2 finishes.
• If I had a mu3,4,5 etc and I clicked mut3 it would run mut3 > mut2 and
• the finally mut1 If you ran mut5 it would then do 4 > 3 > 2 > 1 etc...

Component

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

I would of course like each mutation to only fire once when clicked.

Answer 1

create MutationContainer.js which contain all your mutation export MutationContainer as a variable

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
})

Import it on any component where you want to use this mutations

on your 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>
)

On 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>
)

Please take care of variables as par your requirement

And most important point based on your condition

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

If you persist this problem please let me know. will try react-adopt with new approach.