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!
Possibly:
const [users, setUsers] = useState()
should be:
const [users, setUsers] = useState([])