2

I'm using relay and graphQL in react Typescript to fetch list of users. While I'm passing the props from ViewerUserList.tsx to UserList.tsx. I'm getting this error: Object is of type 'unknown'.ts(2571)

I've mentioned in below file where I'm getting the error exactly

This is my ViewerUserList.tsx

import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import UserList from './UserList'
import environment from "../relayEnvironment"

export default class ViewerUserList extends React.Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query ViewerQuery {
            viewer {
              id
              # Re-use the fragment here
              ...UserList_userData
            }
          }
        `}
        variables={{}}
        render={({error, props}) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return (
            <div>
              <div>list for User {props.viewer.id}:</div> //I am getting error here on props
              <UserList userData={props.viewer} />
            </div>
          );
        }}
      />
    );
  }
}

This is UserList.tsx

// OPTIONAL: Flow type generated after running `yarn relay`, defining an Object type with shape of the fragment:
import type {UserList_userData} from './__generated__/UserList_userData.graphql';
import User from './User'

import React from 'react';
import {graphql, createFragmentContainer} from 'react-relay';

type Props = {
  userData: UserList_userData,
}

class UserList extends React.Component<Props> {
  render() {
    const {userData: {apiVersion, users}} = this.props;

    return (
      <section>
        <ul>
          {users!.edges!.map(edge =>
            <User
              key={edge!.node!.id}
              /*We pass the data required by Todo here*/
              user = {edge!.node!}
            />
          )}
        </ul>
      </section>
    );
  }
}

export default createFragmentContainer(
  UserList,
  {
    userData: graphql`
      # As a convention, we name the fragment as '<ComponentFileName>_<PropName>'
      fragment UserList_userData on Query {
        users(
          first: 2147483647  # max GraphQLInt, to fetch all todos
        ) {
          edges {
            node {
              id,
              # We use the fragment defined by the child Todo component here
              ...User_user,
            },
          },
        },
        apiVersion
      }
    `,
  },
);
mWaqar444
  • 21
  • 2
  • 2
  • 1
    Does this answer your question? [Object is of type 'unknown' typescript generics](https://stackoverflow.com/questions/60151181/object-is-of-type-unknown-typescript-generics) – Erhan Yaşar Jan 06 '21 at 21:51

1 Answers1

0

I was facing similar problem, but with try / catch errors, so I did the following:

  • declare 'err' as unknow
  • create a const 'e' = err
  • change his type from unknow to ErrorEvent
  • use 'e'

Worked for me 

    catch (err: unknown) {
    const e = err as ErrorEvent;
    return response.status(400).json({ Error: e.message });
    }

In your case, you can try to:

  1. declare unknow as TS mention;
  2. get another const forcing the type to ErrorEvent;
  3. use this last const for whatever you need.

See if it works.

ThiagoMB
  • 1
  • 1