React Query: Introduce react-compiler support

[theisgroenbech]

First of all thank you for a super nice library! 🥳

The current output for React Query is does not adhere to the rules of React and thereby breaks react-compiler optimisations.

Mutating a value returned from a function whose return value should not be mutated (react-compiler/react-compiler)

The issue is setting the queryKey of query here:

  const query = useQuery(queryOptions, queryClient) as UseQueryResult<TData, TError> & {
    queryKey: DataTag<QueryKey, TData, TError>
  }

  query.queryKey = queryOptions.queryKey

  return query

The fix is using spreading instead, which does not break the rules of React and thereby introduces support for React Compiler.

The fixed output looks like this:

  const query = useQuery(queryOptions, queryClient)

  return { ...query, queryKey: queryOptions.queryKey } as UseQueryResult<
    TData,
    TError
  > & { queryKey: DataTag<QueryKey, TData, TError> }
}

[melloware]

Looks like you have to run yarn update samples

[theisgroenbech]

Looks like you have to run yarn update samples

Thanks @melloware! I have updated the samples 🥳

[melloware]

Running tests now.

[melloware]

Maybe a helper function would be better

[theisgroenbech]

@melloware moved into helper!