GraphQL Apollo React: создание ресурса с мутацией и обновление потока пользовательского интерфейса - PullRequest
Новая
       18

GraphQL Apollo React: создание ресурса с мутацией и обновление потока пользовательского интерфейса

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

Я пытаюсь создать новый элемент в массиве с помощью мутации, а затем обновить интерфейс в соответствии с.

Моя схема выглядит следующим образом: 

account {
  id
  acronyms {
    id
    name
    description
  }
}

Запрос на получение сокращений: 

export const GET_ACRONYMS = gql`
  query Acronyms {
    acronyms {
      id
      name
      description
    }
  }
`;

У меня есть мутация создания: 

  mutation createAcronym($name: String, $description: String) {
    createAcronym(acronym: $name, description: $description) {
      __typename
      acronyms {
        __typename
        id
        name
        description           
      }
    }
  }

Метод реагирующего рендера:

public render () {return ({({loading, error, data}) => {if (loading) {return;} 

      if (error) {
        this.props.enqueueSnackbar('Unable to get acronyms', { variant: 'error' });
        throw error;
      }

      return (
        <Mutation
          mutation={mutations.createAcronym.mutation}
          onError={this.mutateError('Unable to create new acronym')}
        >
          {mutate => (
            <div>
              <Grid container={true}>{data.acronyms.map(this.renderAcronym)}</Grid>
              <Button color="primary" onClick={this.addAcronym.bind(this, mutate)}>
                <Add style={{ marginRight: 5 }} />
                Add Acronym
              </Button>
            </div>
          )}
        </Mutation>
      );
    }}
  </Query>
);

}

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

Однако, когда я нажимаю Add Acronym Я вижу успешное создание новой аббревиатуры с ответом от сервера. Чего я не могу сделать, так это прикрепить эту новую аббревиатуру к текущему запросу GET_ACRONYMS. Если я обновляю страницу, вновь созданная аббревиатура отображается кактеперь возвращается GET_ACRONYMS.

Я думал, что мой подход может быть неправильным. Я вижу, что в этом примере приложения они используют подписки https://github.com/gsans/todo-apollo-v2-react/blob/master/src/App.js

Я предполагаю, что это можно сделать без подписоки мне просто нужно, чтобы клиент Apollo зналэтот новый ресурс в аккаунте> аббревиатуры.Я пытался посмотреть на метод обновления, но он не работал.Также попытался refetchQueries: [GET_ACRONYMS].

Я также хочу удалить эти ресурсы и думаю, что я столкнусь с подобными проблемами: (

Заранее спасибо.

1 Ответ

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

Из документов :

Иногда, когда вы выполняете мутацию, ваш сервер GraphQL и ваш кеш Apollo не синхронизируются.Это происходит, когда выполняемое вами обновление зависит от данных, которые уже находятся в кэше;например, удаление и добавление элементов в список.Нам нужен способ сообщить клиенту Apollo обновить запрос для списка элементов.Это где функция обновления приходит!Функции обновления не требуются для обновления кэша для всех мутаций, но наша мутация addTodo является примером того, где она полезна.

Другими словами, особенно когда вы запрашиваете List чего-то, вам нужно передать функцию update вашему Mutation компоненту.Похоже, ваша мутация возвращает все аббревиатуры, а не только созданную (?), Поэтому вы можете сделать что-то вроде этого: 

<Mutation
  mutation={mutations.createAcronym.mutation}
  onError={this.mutateError('Unable to create new acronym')}
  update={(cache, { data: { createAcronym: { acronyms } } }) => {
    cache.writeQuery({
      query: GET_ACRONYMS,
      data: { acronyms }
    })
  }}
>

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

...