如何解决Apollo变异和Formik渲染道具之间的相互依赖性？

Question

我确定这是一个有据可查的解决方案的常见问题，但是我似乎找不到我要寻找的模式。这是情况...

<Mutation variables={formValues}>
  {(login, { error, loading }) => (
    <Formik onSubmit={login}>
      {({ values: formValues, handleSubmit ) =>
        <Form method="post">
          // form inputs go here
          <button type="submit" onClick={handleSubmit}>
            Login
          </button>
        </Form>
      }
    </Formik>
  )}
</Mutation>

看上面的代码，您可以看到我有嵌套的渲染道具。但是内部渲染道具formValues的输出是外部渲染道具variables={formValues}的输入。但是，此值显然不适用于外部渲染道具。

问题

1. 存在哪些模式可以解决此依赖性问题？
2. 如果您能告诉我如何使用react-adopt

Answer 1

仅回答问题1（可能是更好的解决方案）

我找到了一个可行的解决方案，尽管可能还有其他解决方案（更好？）。在这种情况下，我仍然没有弄清楚如何构成渲染道具。但这是我当前的解决方案...

<Mutation>
  {(login, { error, loading }) => (
    <Formik onSubmit={values => login({ variables: values })}>
      {({ values: formValues, handleSubmit ) =>
        <Form method="post">
          // form inputs go here
          <button type="submit" onClick={handleSubmit}>
            Login
          </button>
        </Form>
      }
    </Formik>
  )}
</Mutation>

重要变化

1. 我将<Mutation variables={formValues}>更改为<Mutation>
2. 我将onSubmit={login}更改为onSubmit={values => login({ variables: values })}

Answer 2

您已经指出，variables可以直接传递给mutate函数，而不是传递给Mutation组件。关于react-adopt，根据文档：

  

[Y] ou可以将函数而不是jsx元素传递给映射器。此函数将接收一个渲染道具，该渲染道具负责您的渲染，在Composed组件上传递的道具以及每个映射器的先前值。

所以我希望这样的事情应该起作用：

const Composed = adopt({
  mutation: ({ render }) => (
    <Mutation mutation={LOGIN_MUTATION}>
      {(login, { loading, data, error }) => render({ login, loading, data, error })}
    </Mutation>
  ),
  formik: ({ mutation: { login }, render }) => ( // **EDIT**
    <Formik onSubmit={values => login({ variables: values })}>
      {render}
    </Formik>
  )
})

const App = () => (
  <Composed>
    {({ mutation: { login, data, loading, error }, formik: { values, handleSubmit } }) => (
      // ...
    )}
  </Composed>
)