如何解决 Apollo 的 Mutation 和 Formik Render Props 之间的相互依赖？

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} 的输入。但是，这个值显然对外部 render prop 不可用。

问题

解决此依赖性问题的模式是什么？
奖金，如果你能告诉我如何使用 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>

显着变化

我把<Mutation variables={formValues}>改成了<Mutation>
我把onSubmit={login}改成了onSubmit={values => login({ variables: values })}

Answer 2

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

[Y]ou can pass a function instead of a jsx element to your mapper. This function will receive a render prop that will be responsible for your render, the props passed on Composed component, and the previous values from each mapper.

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

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

如何解决 Apollo 的 Mutation 和 Formik Render Props 之间的相互依赖？

How to Resolve Interdependency Between Apollo's Mutation and Formik Render Props?

reactjs

react-apollo

formik

问题

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

显着变化