尝试从GraphQL API获取数据，然后将其作为道具传递给组件

Question

我现在很喜欢GraphQL和TypeScript，所以我试图通过使用这个API https://github.com/trevorblades/countries来学习它。我试图从API中获取数据到我的HomeComponent中的React应用程序，然后将数据传递给我的CountryTable组件，这是来自MUI库的表组件。但是我得到的这些错误是"类型的参数不能分配给参数"TypeError:国家。Map不是函数

这是我的HomeComponent的样子:

import { Grid } from '@mui/material';
import Typography from '@mui/material/Typography';
import { ApolloClient, InMemoryCache, gql, useLazyQuery, ApolloProvider, useQuery,     TypedDocumentNode} from '@apollo/client';
import { useEffect, useState } from 'react';
import React from 'react';
import CountryTable from '../components/CountryTable';
const client = new ApolloClient({
cache: new InMemoryCache(),
uri: 'https://countries.trevorblades.com'
});
const LIST_COUNTRIES = gql`
query getCountries {
countries {
name
code
capital
}}`;
export interface Country {
name: string;
code: string;
capital: string;
}
export interface Countries {
getAllCountries: Country[];
}
export default function Home() {
const {loading, data, error} = useQuery<Countries>(LIST_COUNTRIES, {client});
const [allcountries, setAllcountries] = useState([]);
useEffect(() => {
setAllcountries(data);
}, [data])
if (loading) return <p>Loading...</p>;
if (error) return <p>Error : {error.message}</p>;
return (
<ApolloProvider client={client}>
<Grid container alignItems="center" justifyContent="center">
<Grid item>
<CountryTable countries={allcountries}/>
</Grid>
</Grid>
</ApolloProvider>
)
}

这里是我的CountryTable组件:

import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import { Country } from "../pages";
export interface CountryProps {
countries: Country[];
}
export default function CountryTable({countries}: CountryProps) {
return(
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="right">Name</TableCell>
<TableCell align="right">Code</TableCell>
<TableCell align="right">Capital</TableCell>
</TableRow>
</TableHead>
<TableBody>
{countries?.map((row: any) => (
<TableRow key={row.name}>
<TableCell align="right">{row.name}</TableCell>
<TableCell align="right">{row.code}</TableCell>
<TableCell align="right">{row.capital}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

项目结构:projectstructure

Answer 1

我为什么不能从GraphQL API获取数据的问题是因为我正在检索的数据是作为一个整体对象和useState变量，我用来保存我的数据，所以我可以将它作为道具传递给另一个组件是接口国家的ArrayType。因此，我删除了接口Countries，然后定义了const变量，如下所示:

const {loading, data, error} = useQuery<{countries: Country[]}>(LIST_COUNTRIES, {client});
const [allcountries, setAllcountries] = useState<Country[]>();

然后我的组件接收道具有以下代码:

import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import { FC } from "react";
import { Country } from "../pages";
export interface CountryProps {
countries: Country[] | undefined;
}

const CountryTable: FC<CountryProps> = ({countries}) => {
const router = useRouter();
return(
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="right">Name</TableCell>
<TableCell align="right">Code</TableCell>
<TableCell align="right">Capital</TableCell>
</TableRow>
</TableHead>
<TableBody>
{countries?.map(({name, code, capital}: Country) => (
<TableRow key={name}>
<TableCell align="right">
<Box>
<Link href={{pathname: "/detail/[name]", query: {name: name}}}>
{name}
</Link>
</Box>
</TableCell>
<TableCell align="right">{code}</TableCell>
<TableCell align="right">{capital}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default CountryTable;