Apollo React Вложенный запрос и мутация

Question

У меня есть компонент, который я хотел бы получить данные для профиля и разрешить публиковать сообщения в том же представлении.Здесь я создал простой компонент профиля, и в запросе была установлена ​​мутация, похожая на учебник Apollo React .

Когда я запускаю это, я получаю правильно обработанный запрос с данными.При нажатии кнопки происходит мутация, но страница перерисовывается с пустым объектом в параметре Query s data и ошибками страницы с Cannot read property 'name' of undefined (что ожидается при пустом объекте data).

Есть ли лучший подход здесь?

const GET_PROFILE = gql`
  query GetProfileQuery($profileId: ID!) {
    getProfileInfo(profileId: $profileId) {
      name
    }
  }
`;

const ADD_ENDORSEMENT = gql`
  mutation AddEndorsement($profileId: ID!, $body: String!) {
    addEndorsement(profileId: $profileId, body: $body) {
      endorsementId
    }
  }
`;

const Profile = props => {
  const profileId = props.match.params.profileId;
  return (
    <Query query={GET_PROFILE} variables={{ profileId: profileId }}>
      {({ loading, error, data }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;
        return (
          <Fragment>
            <h1>Welcome {data.getProfileInfo.name}</h1>
            <Mutation mutation={ADD_ENDORSEMENT}>
              {(addEndorsement, { loading, error }) => (
                <div>
                  <button
                    onClick={e => {
                      addEndorsement({
                        variables: {
                          profileId: profileId,
                          body: "This is a test."
                        }
                      });
                    }}
                  >
                    Save
                  </button>
                  {loading && <p>Loading...</p>}
                  {error && <p>Error :(</p>}
                </div>
              )}
            </Mutation>
          </Fragment>
        );
      }}
    </Query>
  );
};

Answer 1

Попробуйте добавить следующее в мутацию onClick, это должно помочь избежать необходимости обновлять кеш вручную, хотя это будет следующим шагом.Вы можете передать только строковое имя запроса в refetchQueries, вам не нужно передавать фактический запрос там.Другой прием - убедиться, что вы получаете те же поля обратно, чтобы объект кэша совпадал ((не уверен, какой тип вы возвращаете при запросе / мутации.

onClick={e => {
  addEndorsement({
    variables: {
      profileId: profileId,
      body: 'This is a test.',
    },
    refetchQueries: ['GetProfileQuery']
  })
}}

Answer 2

У меня была похожая проблема, когда данные оказались неопределенными.В моем случае проблема была вызвана параметром Query subscribeToMore , который я использовал, чтобы сделать кэш недействительным из-за того, что он молча не смог объединить обновленные данные с исходными результатами запроса (он не содержал абсолютно идентичных полей данных).

В вопросе не упоминаются подписки, но это будет аналогичная проблема аннулирования кэша.

Чтобы исправить, я сначала попробую убедиться, что Query и Mutation возвращают идентичные данные.

Если это не решит проблему, то в зависимости от скорости отклика нужно либо посмотреть « refetchQueries / awaitRefetchQueries», чтобы обновить запрос, либо вручную вставить обновленные данные в локальный кеш с помощью "обновить" опции на мутации.

Удачи.