React Apollo 客户端查询抛出错误“提供给`Query`的`array`类型的无效prop`children`，预期`function`”
Posted
技术标签:
【中文标题】React Apollo 客户端查询抛出错误“提供给`Query`的`array`类型的无效prop`children`，预期`function`”【英文标题】：React Apollo Client Query throwing error "Invalid prop `children` of type `array` supplied to `Query`, expected `function`" 【发布时间】：2020-10-18 08:08:47 【问题描述】：我正在开发一个 React JS 项目。我的应用需要使用 GraphQL API。所以我为此使用了 Apollo 客户端。当我将 Query 组件与 ApolloProvider 组件一起使用时，它会抛出错误。以下是我的代码。
这是我的 app.js
import React from "react";
import ReactDOM from "react-dom";
import createBrowserHistory from "history";
import HashRouter, Route, Switch, Redirect from "react-router-dom";
import AdminLayout from "./layouts/Admin";
import ApolloProvider from '@apollo/react-hooks';
import ApolloClient, gql from 'apollo-boost';
const client = new ApolloClient(
uri: 'https://48p1r2roz4.sse.codesandbox.io',
);
const hist = createBrowserHistory();
ReactDOM.render(
<ApolloProvider client=client>
<HashRouter history=hist>
<Switch>
<Route path="/admin" render=(props) => <AdminLayout ...props /> />
<Redirect to="/admin/dashboard" />
</Switch>
</HashRouter>
</ApolloProvider>,
document.getElementById("app")
);
如你所见，我声明了 Apollo 客户端并将其分配给 ApolloProvider 组件的 client prop。
我有一个名为 RestaurantForm 的组件，它使用 GraphQL Query 组件，如下所示。
import React from 'react';
import Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Col, Form, FormGroup, Input, Row from "reactstrap";
import gql from 'graphql-tag';
import Query from 'react-apollo';
const EXCHANGE_RATES_QUERY = gql`
rates(currency: "USD")
currency
rate
`;
class RestaurantForm extends React.Component
render()
return (
<Query query=EXCHANGE_RATES_QUERY>
( data ) =>
<>
<div className="content">
<Row>
<Col md="4">
<Card className="card-user">
<div className="image">
<img
src="assets/paper-dashboard/img/damir-bosnjak.jpg"
/>
</div>
<CardBody>
<div className="author">
<a href="#pablo" onClick=(e) => e.preventDefault()>
<img
className="avatar border-gray"
src="assets/paper-dashboard/img/mike.jpg"
/>
<h5 className="title">Chet Faker</h5>
</a>
<p className="description">@chetfaker</p>
</div>
<p className="description text-center">
"I like the way you work it <br />
No diggity <br />I wanna bag it up"
</p>
</CardBody>
<CardFooter>
<hr />
<div className="button-container">
<Row>
<Col className="ml-auto" lg="3" md="6" xs="6">
<h5>
12 <br />
<small>Files</small>
</h5>
</Col>
<Col className="ml-auto mr-auto" lg="4" md="6" xs="6">
<h5>
2GB <br />
<small>Used</small>
</h5>
</Col>
<Col className="mr-auto" lg="3">
<h5>
24,6$ <br />
<small>Spent</small>
</h5>
</Col>
</Row>
</div>
</CardFooter>
</Card>
</Col>
<Col md="8">
<Card className="card-user">
<CardHeader>
<CardTitle tag="h5">Edit Profile</CardTitle>
</CardHeader>
<CardBody>
<Form>
<Row>
<Col className="pr-1" md="5">
<FormGroup>
<label>Company (disabled)</label>
<Input
defaultValue="Creative Code Inc."
disabled
placeholder="Company"
type="text"
/>
</FormGroup>
</Col>
<Col className="px-1" md="3">
<FormGroup>
<label>Username</label>
<Input
defaultValue="michael23"
placeholder="Username"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="4">
<FormGroup>
<label htmlFor="exampleInputEmail1">
Email address
</label>
<Input placeholder="Email" type="email" />
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="6">
<FormGroup>
<label>First Name</label>
<Input
defaultValue="Chet"
placeholder="Company"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="6">
<FormGroup>
<label>Last Name</label>
<Input
defaultValue="Faker"
placeholder="Last Name"
type="text"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="12">
<FormGroup>
<label>Address</label>
<Input
defaultValue="Melbourne, Australia"
placeholder="Home Address"
type="text"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="4">
<FormGroup>
<label>City</label>
<Input
defaultValue="Melbourne"
placeholder="City"
type="text"
/>
</FormGroup>
</Col>
<Col className="px-1" md="4">
<FormGroup>
<label>Country</label>
<Input
defaultValue="Australia"
placeholder="Country"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="4">
<FormGroup>
<label>Postal Code</label>
<Input placeholder="ZIP Code" type="number" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md="12">
<FormGroup>
<label>About Me</label>
<Input
type="textarea"
defaultValue="Oh so, your weak rhyme You doubt I'll bother, reading into it"
/>
</FormGroup>
</Col>
</Row>
<Row>
<div className="update ml-auto mr-auto">
<Button
className="btn-round"
color="primary"
type="submit"
>
Update Profile
</Button>
</div>
</Row>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
null
</Query>
)
export default RestaurantForm;
当我运行我的应用程序并转到 RestaurantForm 组件页面时，我收到以下错误。
app.js:66453 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Query`, expected `function`.
in Query (created by RestaurantForm)
in RestaurantForm (created by Context.Consumer)
in Route (created by Dashboard)
in Switch (created by Dashboard)
in div (created by Dashboard)
in div (created by Dashboard)
in Dashboard (created by Context.Consumer)
in Route
in Switch
in ApolloProvider
in Router (created by HashRouter)
in HashRouter
如果我只是在 RestaurantForm 组件中实例化客户端并在 componentDidMount 钩子中查询它，那么事情就是不使用 Query 组件和 ApolloProvider 组件，它正在工作。但我需要使用 ApolloProvider 和 Query 组件。我的代码有什么问题，我该如何解决？
【问题讨论】：
【参考方案1】：该错误通常意味着 Query 中的内容格式错误。
这是https://github.com/apollographql/react-apollo/issues/2050的帖子
也许您有多余的逗号，或者即使没有Query，您的代码也无法正常工作。
【讨论】：
【参考方案2】：上面的Query 组件有两个孩子：
-
一个函数：
( data ) => ...
空： null
删除 null 以便您只传递一个子项（函数）来解决错误。
回调也需要返回
( data ) =>
return (
//here are your components
)
【讨论】：
以上是关于React Apollo 客户端查询抛出错误“提供给`Query`的`array`类型的无效prop`children`，预期`function`”的主要内容，如果未能解决你的问题，请参考以下文章
React Native、GraphQL、Apollo - 突变期间抛出的错误
尝试使用 React Apollo Query 组件进行 GraphQL 查询，打字稿导致错误
React JS + Apollo 客户端查询错误：“网络错误：无法获取”。从手机打电话时