My goal is to fetch the userId from another nested map within a queried loop.
The issue encountered reads as follows: Error: Rendered more hooks than during the previous render.
This error cropped up when I inserted the following code snippet inside the map:
const { data: { getUser } = {} } = useQuery(FETCH_USER_QUERY, {
variables: {
userId: something?.id,
},
});
within my component... Below is my complete component code:
export default function SomethingComponent() {
const { data: { getSomething } = {} } = useQuery(
FETCH_SOMETHING_QUERY
);
return (
<>
{getSomething?.map((something) => {
const { data: { getUser } = {} } = useQuery(FETCH_USER_QUERY, {
variables: {
userId: something?.id,
},
});
return (
<div>
<h1>{getUser.name}</h1>
{/* ... */}
{/* ... */}
{/* ... */}
{/* ... */}
{/* ... */}
{/* ... */}
</div>
);
})}
</>
);
}
Additionally, here is the query for fetching "Something":
const FETCH_SOMETHING_QUERY = gql`
{
getSomething {
id
}
}
`;
As for the user query:
const FETCH_USER_QUERY = gql`
query ($userId: ID!) {
getUser(userId: $userId) {
# ...
}
}
`;
I've pondered on possible resolutions, but I haven't found an alternative way to access something.id without delving into the mapped loop. Research suggests that the error may be due to improper placement or ordering of hooks.