问题

Question

我将public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) { // ... String traceId = exchange.getAttributeOrDefault("traceId", "default_value_goes_here"); //... return chain.filter(exchange); }与react-adopt一起使用。造成这种情况的简单原因是，在一个页面上进行大量查询和更改会变得非常混乱。

问题

触发react-apollo时只会发生一次突变。
触发mut1时，mut2触发，mut2完成后mut1触发。
如果我有一个mut2，然后单击mu3,4,5 etc，它将运行mut3> mut3，并且
最后mut2个如果您运行了mut1，它将执行mut5等...

组件

4 > 3 > 2 > 1

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

Answer 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。

使用react-apopt触发两次突变

问题

组件

1 个答案: