Before v21, the following code was valid for typescript
import { graphql, PreloadedQuery, useQueryLoader, usePreloadedQuery } from 'react-relay';
import Button from '@mui/material/Button';
import React from 'react';
import { AppQuery } from './__generated__/AppQuery.graphql';
const appQuery = graphql`
query AppQuery {
me {
name
}
}
`;
const QueryFetcherExample = () => {
const [queryReference, loadQuery, disposeQuery] = useQueryLoader<AppQuery>(appQuery);
if (queryReference == null) {
return (
<Button onClick={() => loadQuery({})}> Click to reveal the name </Button>
);
}
return (
<>
<Button onClick={disposeQuery}>
Click to hide the name and dispose the query.
</Button>
<React.Suspense fallback="Loading">
<NameDisplay queryReference={queryReference} />
</React.Suspense>
</>
);
};
const NameDisplay = ({ queryReference }: { queryReference: PreloadedQuery<AppQuery> }) => {
const data = usePreloadedQuery(appQuery, queryReference);
return <h1>{data.me?.name}</h1>;
};
export default QueryFetcherExample;On line 36 the type of data was inferred though the queryReference type PreloadedQuery<AppQuery> permitting to infer the result of usePreloadedQuery to be AppQuery$data
Since v21 this is not working anymore. I removed the legacy @types/react-relay and @types/relay-runtime dependencies, so i'm based on the new embedded typescript definitions.
The root cause is the PreloadedQuery has been changed from an interface to a type alias:
Before
export interface PreloadedQuery<
TQuery extends OperationType,
TEnvironmentProviderOptions = EnvironmentProviderOptions,
> extends
Readonly<{
kind: "PreloadedQuery";
environment: IEnvironment;
environmentProviderOptions?: TEnvironmentProviderOptions | null | undefined;
fetchKey: string | number;
fetchPolicy: PreloadFetchPolicy;
networkCacheConfig?: CacheConfig | null | undefined;
id?: string | null | undefined;
name: string;
source?: Observable<GraphQLResponse> | null | undefined;
variables: VariablesOf<TQuery>;
dispose: DisposeFn;
isDisposed: boolean;
}>
{}Since v21
export type PreloadedQuery<
TQuery extends OperationType,
TEnvironmentProviderOptions = EnvironmentProviderOptions,
> = Readonly<{
kind: 'PreloadedQuery';
environment: IEnvironment;
environmentProviderOptions?: TEnvironmentProviderOptions | null | undefined;
fetchKey: string | number;
fetchPolicy: PreloadFetchPolicy;
networkCacheConfig?: CacheConfig | null | undefined;
id?: string | null | undefined;
name: string;
source?: Observable<GraphQLResponse> | null | undefined;
variables: VariablesOf<TQuery>;
dispose: DisposeFn;
isDisposed: boolean;
}>;With this new definition, the TQuery generic is lost, preventing the type inference on usePreloadedQuery , so result type is now unknown instead if AppQuery$data
The change has happened here 0f00589#diff-ff6ae2b3d1d6c61b5656279464517ab646bfd9931f11408f5374ce1505827e77R137-R140
It should be reverted ?
Before v21, the following code was valid for typescript
On line 36 the type of
datawas inferred though thequeryReferencetypePreloadedQuery<AppQuery>permitting to infer the result ofusePreloadedQueryto beAppQuery$dataSince v21 this is not working anymore. I removed the legacy
@types/react-relayand@types/relay-runtimedependencies, so i'm based on the new embedded typescript definitions.The root cause is the
PreloadedQueryhas been changed from an interface to a type alias:Before
Since v21
With this new definition, the
TQuerygeneric is lost, preventing the type inference onusePreloadedQuery, so result type is nowunknowninstead ifAppQuery$dataThe change has happened here 0f00589#diff-ff6ae2b3d1d6c61b5656279464517ab646bfd9931f11408f5374ce1505827e77R137-R140
It should be reverted ?