检索路由器查询对象后调用useQuery (带GraphQL的NextJS)
检索路由器查询对象后调用useQuery (带GraphQL的NextJS)
提问于 2020-02-19 04:22:48
我使用：const qry_flightNumber = Number(router.query.flightNumber);检索NextJS中的查询参数，然后想通过执行以下命令向我的GraphQL服务器发送请求: PAGE: LaunchDetails.js
import React, { useEffect, useState } from "react";
import classNames from "classnames";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import PropTypes from "prop-types";
const LAUNCH_QUERY = gql`
query LaunchQuery($flight_number: Int!) {
launch(flight_number: $flight_number) {
flight_number
mission_name
launch_year
launch_success
launch_date_local
rocket {
rocket_id
rocket_name
rocket_type
}
}
}
`;
export default function LaunchDetails({ flightNum }) {
const { loading, error, data } = useQuery(LAUNCH_QUERY, {
variables: { flight_number: flightNum },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error</p>;
console.log("data.launch: ", data.launch);
const flightNumber = data.launch.flight_number;
const launchDate = data.launch.launch_date_local;
const launchSuccess = data.launch.launch_success;
const launchYear = data.launch.launch_year;
const missionName = data.launch.mission_name;
const { rocket } = data.launch;
return (
<div>
<h1 className="display-4 my-3">
<span className="text-dark">Mission: {missionName}</span>
</h1>
<h2 className="mb-3">Launch details</h2>
<ul className="list-group">
<li className="list-group-item">Flight number: {flightNumber}</li>
<li className="list-group-item">Launch year: {launchYear}</li>
<li className="list-group-item">
Launch successful:{" "}
<span
className={classNames({
"text-success": launchSuccess,
"text-danger": launchSuccess === false,
})}
>
{launchSuccess ? "yes" : "no"}
</span>
</li>
</ul>
<h4 className="my-3">Rocket details:</h4>
<ul className="list-group">
<li className="list-group-item">Rocket ID: {rocket.rocket_id}</li>
<li className="list-group-item">Rocket name: {rocket.rocket_name}</li>
<li className="list-group-item">Rocket type: {rocket.rocket_type}</li>
</ul>
<hr />
</div>
);
}
LaunchDetails.propTypes = {
flightNum: PropTypes.number.isRequired,
};包含组件的动态页(flight_number.js)：
import { ApolloProvider } from "@apollo/react-hooks";
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import APOLLO_CLIENT from "../../graphql/config";
import LaunchDetails from "../../components/launches/LaunchDetails";
export default function Home() {
const router = useRouter();
const flightNum = Number(router.query.flightNumber);
return (
<>
{/* <Head>
<title>SpaceX launch</title>
</Head> */}
<ApolloProvider client={APOLLO_CLIENT}>
<div className="container">
<h1 className="title">Apollo launch details</h1>
<LaunchDetails flightNum={flightNum} />
<Link href="/">
<a className="btn btn-secondary">Back</a>
</Link>
</div>
</ApolloProvider>
</>
);
}问题在于，在第一个页面加载时，在flight_number为null的情况下执行GraphQL查询。因此，我在控制台中以以下警告结束：
[GraphQL error]: Message: Variable "$flight_number" of non-null type "Int!" must not be null., Location: [object Object], Path: undefined在运行查询之前，我尝试使用if语句来确保flight_number是!NaN，但是react会抱怨调用钩子的顺序。
显然，在组件完全加载之后，GraphQl变量会被定义并正确执行，但是我仍然会收到控制台警告。
控制台警告屏幕截图：
我有哪些停止控制台警告的选项？谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-20 20:45:23
我现在已经有了一个答案。您可以将跳过参数传递给useQuery，以便仅在变量定义为NaN或未定义时执行查询：
const { loading, error, data } = useQuery(LAUNCH_QUERY, {
variables: { flight_number: flightNum },
skip: Number.isNaN(flightNum),
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60288884
复制相关文章
相似问题
腾讯云开发者
