onCompleted Typescript issues with useState [React]

Help
,
1

Hey there!

I’ve been trying to get my head around this issue and looked through the web but couldn’t find any solutions to my issue.

Lets say, i have a component which renders a list the applications users.
Since I’m using Typescript, I’m also using GraphQL Code Generator, which however, should not be the root of the problem.

I shrinked my component to the following code example:

// AppUser.tsx
import React, { useState, useEffect, useCallback } from "react";

import { useGetAllAppUsersLazyQuery } from "./graphql/users.query.generated";

export function AppUsers() {
	const [appUsers, setAppUsers] = useState<any[]>([]);
	const [loading, setLoading] = useState(true);

	const [allAppUsersQueryHandler, allAppUsersQuery] = useGetAllAppUsersLazyQuery({
		onCompleted: (response) => {
			console.log("GraphQl: ", response);
			setAppUsers(response?.appUsers?.data);
			setLoading(false);
		},
	});

	const fetchAllAppUsers = useCallback(
		({ pageSize, pageIndex, searchArgs }) => {
			setLoading(true);
			allAppUsersQueryHandler({
				variables: { first: pageSize, page: pageIndex, ...searchArgs },
			});
		},
		[allAppUsersQueryHandler],
	);

	useEffect(() => {
		console.log("Component Mounted");
		fetchAllAppUsers({ pageSize: 10, pageIndex: 0 }); // fetch 10 items from page 0
	}, [fetchAllAppUsers]);

	return (
		<div>
			{loading &&
				appUsers.map((appUser) => {
					return <h1 key={appUser.id}>{appUser.firstName}</h1>;
				})}
		</div>
	);
}

Now, this particular code setAppUsers(response?.appUsers?.data); gives me the following typescript error:

Argument of type '({ __typename?: "AppUser" | undefined; } & Pick<AppUser, "id" | "email" | "firstName" | "lastName" | "activatedAt"> & { appOrganization: { __typename?: "AppOrganization" | undefined; } & Pick<...>; appRoles?: Maybe<...> | undefined; appPermissions?: Maybe<...> | undefined; })[] | undefined' is not assignable to parameter of type 'SetStateAction<any[]>'.
Type 'undefined' is not assignable to type 'SetStateAction<any[]>'.ts(2345)

I’ve tried to set the type to the AppUser type, with and without Partial.

Anyone knows what’s the issue here? I’d rather try to avoid using any but not even that works.