Использование значений GraphQL с React, когда они могут быть нулевыми

Question

Похоже, что когда значение не найдено в запросе GraphQL, оно устанавливает для этого поля значение null, а не undefined (см. Проблему здесь ).

null - это неопределенное или отсутствующее в GraphQL

Учитывая, что React не будет использовать опору по умолчанию для значения null, это лучший способ справиться с ситуацией, когда данные GraphQL передаются в компонент React.

Например, у меня есть компонент TagList, в который я передаю результат запроса GraphQL. Хотя у меня есть следующее:

TagList.defaultProps = {
  tags: [],
}

Если запрос не возвращает тегов, значение tags будет не undefined, а null, поэтому значение по умолчанию не применяется, и компонент пытается выполнить рендеринг с использованием null в качестве значения тегов.

Очевидно, что я могу добавить проверку вверху метода рендеринга и установить значение [], но кажется, что должно быть лучшее решение.

Answer 1

В спецификации GraphQL отсутствует понятие неопределенного значения - значения просто являются нулевыми или ненулевыми. Фактически, при изложении шагов для разрешения значения поля указывается, что значение undefined должно быть приведено к нулевому значению:

Если результат равен нулю (или другому внутреннему значению, аналогичному нулю, например, undefined или NaN), вернуть ноль.

Тем не менее, с моей головы есть несколько способов, которыми вы можете решить это:

1.) На стороне клиента создайте небольшой HOC, в который вы можете обернуть свои компоненты:

const UndefinedToNull = (Component) => (props) => {
  const newProps = props.map(p => p === null ? undefined : p)
  return <Component {...newProps}>
}

2.) Если вы используете Apollo в качестве клиента, вы сможете создать промежуточную ссылку, которая преобразует ноль в неопределенный. Что-то вроде:

const middlewareLink = new ApolloLink((operation, forward) => {
  return forward(response).map(result => {
    // transverse the result, mutating it as needed
    return result
  })
}

3.) На стороне сервера, если вы используете apollo-server, вы можете использовать опцию конфигурации formatResponse, чтобы пересечь ответ GraphQL и преобразовать значения null или undefined при необходимости. YMMV с другим промежуточным ПО GraphQL.