Лучший шаблон для GraphQL создать или обновить форму с React? - PullRequest
Новая
       33

Лучший шаблон для GraphQL создать или обновить форму с React?

0 голосов
/ 24 октября 2018

Я новичок в GraphQL, но у меня есть опыт работы с React.

Я пытаюсь создать простое приложение с React и Apollo, в котором одна и та же форма используется для создания или обновления сущности, скажем Публикация .

Я не хочу дублировать форму, поэтому я подумал, что я бы определил компонент PostForm и использовал бы страницы CreatePostPage и UpdatePostPage.

CreatePostPage.js (упрощенно) 

const CreatePostPage = ({match}) => (
  <div>
    <h1>Create Post</h1>
    <Mutation mutation={POST_CREATE}>
      {(createPost, {data}) => (
        <PostForm onSubmit={(formData) => createPost(formData)} />
      )}
    </Mutation>
  </div>
)

UpdatePostPage.js (упрощенно) 

const UpdatePostPage = ({match}) => (
  <div>
    <h1>Update Post</h1>
    <Query query={POST_GET} variables={{id: match.params.id}}>
      {({ data, networkStatus }) => {
        const post = data && data.post ? omitDeep(data.post, '__typename') : null;
        return (
          <Mutation mutation={POST_UPDATE}>
            {(updatePost, {data}) => (
              <PostForm post={post} onSubmit={(formData) => updatePost(formData)} />
            ))}
          </Mutation>
        );
      }}
    </Query>
  </div>
  )

Теперь PostForm необходимо поддерживатьего собственное состояние, так что пользователь может редактировать сообщение.Я планировал использовать componentWillReceiveProps(), увидел, что сейчас это можно сделать getDerivedStateFromProps(), а затем несколько раз прочитать, что я Возможно, не нужно производное состояние ...

Так что мне интересно, если это правильный способ сделать это?

Моя проблема хорошо описана в этой средней статье , и я реализовал решение (которое также предлагается командой React)

Но это кажется довольно хакерским.Это правильный способ сделать это или я должен обрабатывать локальное состояние по-другому?Хотите знать, как Дэн Абрамов будет обрабатывать простое приложение создания / обновления, как это =)

Спасибо за помощь!

1 Ответ

0 голосов
/ 24 октября 2018

Для вашего PostForm вам понадобится компонент с состоянием, но, насколько я могу судить, вам не нужно использовать componentWillReceiveProps или getDerivedStateFromProps.В этом конкретном случае ваша post опора просто для инициализации вашего состояния.Что вы должны сделать, это предотвратить рендеринг компонента до тех пор, пока у вас не появятся данные публикации.

Вы можете просто сделать что-то вроде этого: 

<Query query={POST_GET} variables={{id: match.params.id}}>
  {({ data, networkStatus }) => {
    if (!data.post) return null; // data itself should never be undefined
    const post = omitDeep(data.post, '__typename');
    return (
      <Mutation mutation={POST_UPDATE}>
        {(updatePost, {data}) => (
          <PostForm post={post} onSubmit={(formData) => updatePost(formData)} />
        ))}
      </Mutation>
    );
  }}
</Query>

Затем внутри конструктора PostForm вы можете установитьваше начальное состояние к любому значению props.post.

Конечно, вы можете учитывать состояния загрузки и ошибки, и в этом случае вы должны визуализировать соответствующие компоненты вместо этого в зависимости от значений, предоставленных Query компонент.

...