reactjstypescriptgraphqlreact-apolloreact-apollo-hooks

Typescript error got undefined with useState hook


Im new to graphql so I decided to follow this guide.

However I got an error when querying (step 7) :

Argument of type '({ __typename?: "User"; } & Pick<User, "email" | "id" | "name" | "createdAt">)[]' is not assignable to parameter of type '(prevState: undefined) => undefined'.
  Type '({ __typename?: "User"; } & Pick<User, "email" | "id" | "name" | "createdAt">)[]' provides no match for the signature '(prevState: undefined): undefined'.  TS2345

    37 |       if (data && data.allUsers) {
    38 |         if (data && data.allUsers && data.allUsers.nodes) {
  > 39 |           setUsers(data.allUsers.nodes);
       |                    ^
    40 |         }
    41 |       }
    42 |     }

Here is the component:

import React, { useState, useEffect } from 'react'
import { useGetUsers } from '../utils/services'
import { User } from '../generated/graphql'

const Users: React.FC = () => {
    const [users, setUsers] = useState()
    const { data, error, loading } = useGetUsers()
    
    useEffect(() => {
        if (data) {
            if (data && data.allUsers && data.allUsers.nodes) {
                setUsers(data.allUsers.nodes)
            }
        }
        if (error) {
            console.log(error)
        }
        if (loading) {
            console.log(loading)
        }
    }, [data, error, loading])

    return (
        <>
            <h2>Hello users,</h2>
            {users &&
                users.length > 0 &&
                users.map((user: User, index: number) => (
                    <p key={`user_${index}`}>
                        {user.name}{' '}
                    </p>
                ))}
        </>
    )
}

export default Users

However it works when I use

data.allUsers.nodes

Like this :

{data && data.allUsers ? (
        data.allUsers.nodes &&
        data.allUsers.nodes.length > 0 &&
        data.allUsers.nodes.map((user: User, index: number) => (
          <p key={`user_${index}`}>{user.name}</p>
        ))
      ) : (
        <React.Fragment />
      )}

And of course I've removed setUsers in the useEffect() hooks.

I notice that I had to set strict to false in my .tsconfig.json file.

I would like to know why I m not able to use the setUsers hooks? Why I got that error and how to solve it?

Thank you!


Solution

  • Possibly:

    const [users, setUsers] = useState()
    

    should be:

    const [users, setUsers] = useState([])