When there are a fragment embedded in another framgnet to same object, trying to pass whole array of fragment that returned from useFragment to another FragmentType<>[] prop, type error occors.
export const FilmContainerFragment = graphql(/* GraphQL */ `
fragment FilmContainer on Film {
id
title
...FilmDetails
}
`)
const FilmList = (props: {
film: FragmentType<typeof FilmContainerFragment>[]
}) => {
const film = useFragment(FilmContainerFragment, props.film)
console.log(film[0].title)
// The type 'readonly FilmContainerFragment[]' is 'readonly' and cannot be assigned to the mutable type '{ ' $fragmentRefs'?: { FilmDetailsFragment: FilmDetailsFragment; }; }[]'.(4104)
// App.tsx(33, 3): The expected type comes from property 'film' which is declared here on type '{ film: { ' $fragmentRefs'?: { FilmDetailsFragment: FilmDetailsFragment; }; }[]; }'
FilmDetails({ film: film })
// FilmContainerFragment[] itself is completely satisfied the type FragmentType<typeof FilmDetailsFragment>[]
// but useFragment() adds extra 'readonly []' breaks the satisfaction
const assert1: FilmContainerFragmentType[] extends FragmentType<
typeof FilmDetailsFragment
>[]
? true
: false = true
const assert2: readonly FilmContainerFragmentType[] extends FragmentType<
typeof FilmDetailsFragment
>[]
? true
: false = false
// FilmContainerFragment[] can expanded to
// ( { __typename?: 'Film', id: string, title?: string | null }
// & { ' $fragmentRefs'?: { 'FilmDetailsFragment': FilmDetailsFragment } }
// ) & { ' $fragmentName'?: 'FilmContainerFragment' }[]
// FragmentType<typeof FilmDetailsFragment>[] can expanded to
// { ' $fragmentRefs'?: { 'FilmDetailsFragment': FilmDetailsFragment } }[]
}
export const FilmDetailsFragment = graphql(/* GraphQL */ `
fragment FilmDetails on Film {
id
title
releaseDate
producers
}
`)
const FilmDetails = (props: {
film: FragmentType<typeof FilmDetailsFragment>[]
// Add `readonly` before FragmneType<> can be workaround here
// film: readonly FragmentType<typeof FilmDetailsFragment>[]
}) => {
const film = useFragment(FilmDetailsFragment, props.film)
}
Which packages are impacted by your issue?
@graphql-codegen/client-preset
Describe the bug
When there are a fragment embedded in another framgnet to same object, trying to pass whole array of fragment that returned from useFragment to another FragmentType<>[] prop, type error occors.
Your Example Website or App
https://stackblitz.com/edit/github-qjbrdu?file=App.ts,codegen.ts,package.json
Steps to Reproduce the Bug or Issue
Expected behavior
It can pass whole fragment array to another component's FragmentType<> prop without type errors.
Screenshots or Videos
No response
Platform
graphql
version: 16.2.0@graphql-codegen/*
version(s): 4.2.5Codegen Config File
Additional context
No response