CODEWITHSUNDEEP
javascriptreactjstypescriptgraphqlapollo
user12541823
user12541823

Reputation:

Property 'data' does not exist on type 'Response'

I have used this method for GraphQL mutations and it works but I'm having an issue with Graphql queries. 

 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);

I run the query like this:

<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>
    );
  }

I get an error on datain the first line that:

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

Though it works fine If I completely remove the UserResponse type and just write anyhere.

If I remove the deconstructing and keep using LoadUserResponse, I get an error on the word map in PrintUsers that 

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

and here <PrintUsers data={data} /> I get an error on first datathat

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

Upvotes: 1

Views: 4161

Answers (1)

gqstav
gqstav

Reputation: 2072

When typing ({ data }: LoadUsersResponse) you are deconstructing the object in the initializer. Replacing it with ( data: LoadUsersResponse) should solve your (first) issue. I am not able to answer why it compiles with any though...

Then you're attempting to map an Object, which is not feasible. Perhaps this is what you want to achieve:

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>
  );
}

Some additional thoughts, there's no reason to check for undefined data && as you're explicitly expecting it. It will always be there. And also it's preferable to use literal string above JS String.

Upvotes: 2

Related Questions