typescript - 属性“响应”的类型不兼容。类型“未知”不可分配给类型“X”

Question

我正在尝试将useQueryLoaderandusePreloadedQuery钩子react-relay与打字稿一起使用，但出现以下错误。该错误是特定于Typescript因为当我将文件类型更改jsx为代码时按预期工作。

TypeScript error in /src/components/places/PlaceListTest.tsx(13,30):
Type 'PreloadedQuery<OperationType, Record<string, unknown>>' is not assignable to type 'PreloadedQuery<PlacesListQuery, Record<string, unknown>>'.
  Type 'OperationType' is not assignable to type 'PlacesListQuery'.
    Types of property 'response' are incompatible.
      Type 'unknown' is not assignable to type 'PlacesListQueryResponse'.  TS2322

    11 |   }, [loadPlacesListQuery]);
    12 |   if(!!queryRef) {
  > 13 |     return <PlacesCardsList  queryRef={queryRef}/>;
       |                              ^
    14 |     } else {
    15 |       return "Loading...";
    16 |   }

总的来说，我正在查询地点列表并将其显示为卡片网格。父组件文件PlacesListTest.tsx包含以下代码。这被包裹在Suspense块中（未显示）。

import React, { useEffect } from 'react';
import { useQueryLoader } from 'react-relay/hooks';
import { placesListQuery } from '../../queries/PlacesListQuery'
import { PlacesCardsList } from'./PlacesCardsList'


export const PlacesListTest = () => {
  const [queryRef, loadPlacesListQuery] = useQueryLoader(placesListQuery);
  useEffect(() => {
    loadPlacesListQuery({});
  }, [loadPlacesListQuery]);
  if(!!queryRef) {
    return <PlacesCardsList  queryRef={queryRef}/>;
    } else {
      return "Loading...";
  }
};

的代码PlacesCardsList.tsx是：

import { usePreloadedQuery, PreloadedQuery } from 'react-relay/hooks';
import { Grid } from '@mui/material';
import { PlaceCard } from './PlaceCard';
import { NewPlaceButton } from './NewPlaceButton';
import type { PlacesListQuery } from '../../queries/__generated__/PlacesListQuery.graphql';
import { placesListQuery, PlacesListQueryProps } from '../../queries/PlacesListQuery'


export const PlacesCardsList = ({queryRef} : PlacesListQueryProps) => {
  const data = usePreloadedQuery<PlacesListQuery>(placesListQuery, queryRef);
  const places = data.places!;
  return (
    <div>
      <NewPlaceButton/>
      <Grid container marginLeft={5}>
        {places!.map(place => (
          <PlaceCard key={place!.id} place={place!}/>
        ))}
      </Grid>
    </div>
  );
};

这是PlacesListQuery.tsx文件

import graphql from 'babel-plugin-relay/macro';
import { PreloadedQuery } from 'react-relay/hooks';
import type { PlacesListQuery } from './__generated__/PlacesListQuery.graphql';

export const placesListQuery = graphql`
  query PlacesListQuery {
    places {
      id
      name
    }
  }
`

export type PlacesListQueryProps = {
  queryRef: PreloadedQuery<PlacesListQuery>;
};

类型兼容性问题发生在queryRef.

还包括PlacesListQuery.graphql.ts下面生成的文件以显示response类型。

/* tslint:disable */
/* eslint-disable */
// @ts-nocheck

import { ConcreteRequest } from "relay-runtime";

export type PlacesListQueryVariables = {};
export type PlacesListQueryResponse = {
    readonly places: ReadonlyArray<{
        readonly id: string;
        readonly name: string;
    } | null> | null;
};
export type PlacesListQuery = {
    readonly response: PlacesListQueryResponse;
    readonly variables: PlacesListQueryVariables;
};



/*
query PlacesListQuery {
  places {
    id
    name
  }
}
*/

const node: ConcreteRequest = (function(){
var v0 = [
  {
    "alias": null,
    "args": null,
    "concreteType": "Place",
    "kind": "LinkedField",
    "name": "places",
    "plural": true,
    "selections": [
      {
        "alias": null,
        "args": null,
        "kind": "ScalarField",
        "name": "id",
        "storageKey": null
      },
      {
        "alias": null,
        "args": null,
        "kind": "ScalarField",
        "name": "name",
        "storageKey": null
      }
    ],
    "storageKey": null
  }
];
return {
  "fragment": {
    "argumentDefinitions": [],
    "kind": "Fragment",
    "metadata": null,
    "name": "PlacesListQuery",
    "selections": (v0/*: any*/),
    "type": "Query",
    "abstractKey": null
  },
  "kind": "Request",
  "operation": {
    "argumentDefinitions": [],
    "kind": "Operation",
    "name": "PlacesListQuery",
    "selections": (v0/*: any*/)
  },
  "params": {
    "cacheID": "a18c05f26be453a1db0fb41cac930a84",
    "id": null,
    "metadata": {},
    "name": "PlacesListQuery",
    "operationKind": "query",
    "text": "query PlacesListQuery {\n  places {\n    id\n    name\n  }\n}\n"
  }
};
})();
(node as any).hash = 'a22e830ef7ff5fe90978f453f4adc02d';
export default node;

如何设置类型不是这样queryRef的？任何帮助，将不胜感激！responseunknown