如何解决阿波罗突变与福米克渲染道具之间的相互依赖关系？

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. 如果你能告诉我如何使用类似反应采用的东西来做到这一点，那就奖金了

Answer 1

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

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

所以我希望这样的事情应该有效：

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

Answer 2

仅回答问题 #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 })}