Клиент Apollo для списка данных: как заменить опрашиваемый компонент запроса компонентом подписки? - PullRequest
Новая
       70

Клиент Apollo для списка данных: как заменить опрашиваемый компонент запроса компонентом подписки?

0 голосов
/ 18 мая 2019

У меня есть приложение, которое отображает список заданий, каждое из которых может находиться в одном из нескольких состояний (статус задания обрабатывается в бэкэнде GraphQL-Yoga и сохраняется в БД Prisma). Я могу добавлять вакансии, удалять их, и статус работы меняется, как сказано, на бэкэнде. Внешний интерфейс построен с использованием React Apollo

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

 <Query query={this.JOBS_QUERY} pollInterval={500}>

Однако я думал, что лучшим решением будет использование подписок, но я не уверен, как это сделать.

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

type Subscription {
    jobs: [Job] !
}

После просмотра официальных документов мне стало интересно, а лучше ли вместо этого иметь подписку, которая возвращает только одну работу 

  type Subscription {
        job: Job !
    }

и интегрируйте это в текущий дисплей, используя subscribeToMore, используя чистую функцию для интеграции его в хранилище клиентов. Со страницы, приведенной выше, их пример 

<CommentsPage
        {...result}
        subscribeToNewComments={() =>
          subscribeToMore({
            document: COMMENTS_SUBSCRIPTION,
            variables: { repoName: params.repoName },
            updateQuery: (prev, { subscriptionData }) => {
              if (!subscriptionData.data) return prev;
              const newFeedItem = subscriptionData.data.commentAdded;

              return Object.assign({}, prev, {
                entry: {
                  comments: [newFeedItem, ...prev.entry.comments]
                }
              });
            }
          })
        }
      />

Я уверен, что это хорошо работает с простым добавлением новой работы (или, в данном случае, комментарием), но как насчет удаления работы или изменения ее статуса? Не станет ли это сложным? Будет ли лучше поддерживать подписку на все вакансии?

Если нужно настроить подписку на все задания, как это сделать? Я предполагаю, что один использует один компонент подписки, который заменяет оригинальный компонент запроса? Как загрузить список данных при монтировании компонента, то есть до публикации каких-либо изменений?

tl; dr: Когда у вас есть список данных, например, «задания» или комментарии, как лучше всего использовать компонент Apollo Client Subscription для загрузки данных при монтировании компонента, а также для отражения дополнений, удаления и изменения?

...