Свойство «данные» не существует для типа «Ответ» - PullRequest
Новая
       1

Свойство «данные» не существует для типа «Ответ»

0 голосов
/ 21 апреля 2020

Я использовал этот метод для мутаций GraphQL, и он работает, но у меня проблема с запросами Graphql. 

 export default interface LoadUsersResponse {
    users: {
        nodes:{
            id: Number;
            firstName: String;
            lastName: String;
            email: String;
            phoneNumber: String;
          }
          totalCount: Number;
    };
  }

const [loadUsers, { loading, data }] = useLazyQuery<LoadUsersResponse>(LoadUsersQuery);

Я запускаю запрос следующим образом: 

<Button onClick={() => ShowUsers()}>
          {' '}
          Search
        </Button>
        <br></br>
        <PrintUsers data={data} />

function PrintUsers({ data }: LoadUsersResponse) {
    return (
      <div>
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      </div>
    );
  }

Я получаю сообщение об ошибке data в первой строке: 

Property 'data' does not exist on type 'LoadUsersResponse'.ts(2339)

Хотя он работает нормально. Если я полностью удаляю тип UserResponse и просто пишу any здесь.

Если я удаляю деконструкцию и продолжаю использовать LoadUserResponse, я получаю сообщение об ошибке на карте слов в PrintUsers, которое 

Property 'map' does not exist on type '{ id: Number; firstName: String; lastName: String; email: String; phoneNumber: String; }'.ts(2339)

и здесь <PrintUsers data={data} /> Я получаю сообщение об ошибке data, что 

Type '{ data: LoadUsersResponse | undefined; }' is not assignable to type 'IntrinsicAttributes & LoadUsersResponse'.
  Property 'data' does not exist on type 'IntrinsicAttributes & LoadUsersResponse'.ts(2322)

1 Ответ

0 голосов
/ 21 апреля 2020

При наборе ({ data }: LoadUsersResponse) вы деконструируете объект в инициализаторе. Замена на ( data: LoadUsersResponse) должна решить вашу (первую) проблему. Я не могу ответить, почему он компилируется с any, хотя ...

Тогда вы пытаетесь map Object, что невозможно. Возможно, это то, чего вы хотите достичь: 

interface NodeProps {
  id: Number;
  firstName: String;
  lastName: String;
  email: String;
  phoneNumber: String;
}

export default interface LoadUsersResponse {
  users: {
    nodes: NodeProps[];
    totalCount: Number;
  };
}

function PrintUsers(data: LoadUsersResponse) {
  return (
    <div>
      {data &&
        data.users.nodes &&
        data.users.nodes.map((c: any, i: any) => (
          <li key={i}>
            Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
            Email: {c.email}, phoneNumber: {c.phoneNumber}
          </li>
        ))}
    </div>
  );
}

Некоторые дополнительные мысли, нет причин проверять наличие неопределенного data &&, поскольку вы явно ожидаете этого. Это всегда будет там. А также предпочтительнее использовать литерал string выше JS String.

...