Property does not exist on type in GraphQL query result

Question

In the React component I use a GraphQL query to fetch data:

const { data, error, loading } = useGetEmployeeQuery({
  variables: { id: "a34c0d11-f51d-4a9b-ac7fd-bfb7cbffa" }
});

On the data destructure

const { first_name } = data?.Employees_employees_by_pk;

type checking returns an error

Property 'first_name' does not exist on type 'Maybe<{ __typename?: "Employees_employees" | undefined; } & Pick<Employees_Employees, "id" | "first_name" | "last_name" | "email" | "avatar" | "started_at" | "created_at" | "updated_at">> | undefined'

Tried to assign a default "" to first_name which didn't help to eliminate the error.

The types are generated with graphql-codegen:

export type GetEmployeeQuery = (
  { __typename?: 'query_root' }
  & { Employees_employees_by_pk?: Maybe<(
    { __typename?: 'Employees_employees' }
    & Pick<Employees_Employees, 'id' | 'first_name' | 'last_name' | 'email' | 'avatar' | 'started_at' | 'created_at' | 'updated_at'>
  )> }
);

How do I get the query result to destructure nicely?

Answer 1

This code should work

if( data && data.Employees_employees_by_pk ) {
  // no undefined here
  // safe access to 'base type' fields
  const { first_name } = data.Employees_employees_by_pk;
  // use first_name
}

... and it is logically (and by types) different to

const { first_name } = data?.Employees_employees_by_pk;
// possible access/destructure from undefined