Как разрешить взаимозависимость между мутацией Apollo и Formik Render Props? - PullRequest
Новая
       20

Как разрешить взаимозависимость между мутацией Apollo и Formik Render Props?

0 голосов
/ 27 января 2019

Я уверен, что это распространенная проблема с хорошо документированным решением, но я не могу найти шаблон, который ищу.Вот ситуация ... 

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

Глядя на приведенный выше код, вы можете видеть, что у меня есть вложенные реквизиты рендеринга.Но выход внутреннего рендера prop formValues является входом для внешнего рендера prop variables={formValues}.Однако это значение явно недоступно для внешнего рендеринга.

Вопросы

  1. Какие существуют шаблоны для решения этой проблемы с зависимостями?
  2. Бонус, если вы можете сказать мне, как это сделать, используя что-то вроде Реакция-принятие

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Как вы уже указали, variables может быть передано непосредственно в функцию mutate вместо передачи их компоненту Mutation.Что касается react-adopt, то, согласно документам:

[Y] вы можете передать функцию вместо элемента 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>
)
0 голосов
/ 27 января 2019

Ответы только на вопрос № 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 })}
...