Ошибка при передаче переменной в запрос аполлона

Создал запрос Apollo, похожий на этот пример, но продолжает получать эту ошибку: Variable "$id" of required type "ID!" was not provided.

Моя схема:

type RootQuery {
    person(_id: ID!): Person!
}

и резольвер:

 person: async args => {
    const person = await Person.findById(args._id);
    return {
      _id: person._id,
      name: person.name,
      location: person.location,
      address: person.address,
    };
  }

который нормально работает в localhost:3000/graphql Я передаю идентификатор и возвращаю данные.

Тем не менее, это не работает на стороне клиента, ошибка говорит, что идентификатор не указан.

запрос

const GET_PERSON_QUERY = gql`
  query person($id: ID!) {
    person(_id: $id) {
      _id
      name
      location
      address
    }
  }
`;

Компонент запроса

export const GetPerson = ({ _id }) => {
  console.info("id: ", _id);
  return (
    <Query query = {GET_PERSON_QUERY} variables = {{ _id }}>
      {({ loading, error, data }) => {
        if (error) return <div>Error loading posts</div>;
        if (loading) return <div>Loading...</div>
          );
        return (
          <ul>
            <li>{data.person.name}</li>

          </ul>
        );
      }}
    </Query>
  );
};

Например, передав эту переменную const _id = "abcabc" компоненту <GetPerson _id = {_id} /> приводит к ошибке.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
190
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как указывает ошибка, id является обязательной переменной, но вы не передаете ее. Это ваш код, в котором используется сокращенный синтаксис свойства:

<Query query = {GET_PERSON_QUERY} variables = {{ _id }}>

Это эквивалентно:

<Query query = {GET_PERSON_QUERY} variables = {{ _id: _id }}>

Итак, вы предоставляете переменную с именем _id, а не id. Измените свою переменную на:

<Query query = {GET_PERSON_QUERY} variables = {{ id: _id }}>

Другие вопросы по теме