[client-preset] useFragment() shouldn't always return a ReadonlyArray when given an array

[rachel-church]

Is your feature request related to a problem? Please describe.

If an Array<FragmentType<T>> is provided as the data to useFragment(T, data) then the returned value is always ReadonlyArray<DocumentType<T>> which can cause downstream issues with react components and functions that do not expect readonly values.

This is especially true when adding client-preset usage to an existing project.

Example:

import { FragmentType, graphql, useFragment } from "@/gql";

const App_Fragment = graphql(`
  fragment App_Fragment on Foo {
    value
  }
`);

type AppProps = {
  foos: Array<FragmentType<typeof App_Fragment>>;
};

function App(props: AppProps) {
  const foosFragments = useFragment(App_Fragment, props.foos); // ReadonlyArray<App_FragmentFragment>

  const result = doThing(foosFragments); // ERROR: The type 'readonly App_FragmentFragment[]' is 'readonly' and cannot be assigned to the mutable type 'App_FragmentFragment[]'

  return <MyComponent foos={foosFragments} />; // ERROR: The type 'readonly App_FragmentFragment[]' is 'readonly' and cannot be assigned to the mutable type 'App_FragmentFragment[]'
}

type MyComponentProps = {
  foos: Array<App_FragmentFragment>
};

Describe the solution you'd like

useFragmentData() should return type Array<DocumentType<T>> when the data is an Array<FragmentType<T>> and should retain the readonly property when the data is a ReadonlyArray<FragmentType<T>>.

Describe alternatives you've considered

Updating all downstream usages to be ReadonlyArray<T>

client-preset shouldn't be opinionated on the immutability of types. Applying ReadonlyArray to downstream usages can cause significant development overhead in large projects.

Is your feature request related to a problem? Please describe.

No response

[dx1ded]

Any updates? Dunno how to solve it without casting which is not a good solution

[rachel-church]

The fix is included in @graphql-codegen/[email protected]!