时间戳

首页 > 解决方案 > 检索路由器查询对象后调用 useQuery（NextJS with GraphQL）

react-router - 检索路由器查询对象后调用 useQuery（NextJS with GraphQL）

问题描述

我正在使用 NextJS 检索查询参数： const qry_flightNumber = Number(router.query.flightNumber); 然后我想通过这样做向我的 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) 的动态 PAGE：

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>
    </>
  );
}

问题是在第一页加载时，GraphQL 查询在 flight_number 为空的情况下执行。所以我最终在控制台中收到了这个警告：

[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 变量被定义，然后正确执行，但是我仍然会收到控制台警告。

控制台警告截图： 在此处输入图像描述

我有哪些选项可以停止控制台警告？谢谢你。

标签： react-routergraphqlapollonext.js

解决方案

我现在已经得到了答案。您可以将跳过参数传递给 useQuery 以仅在变量已定义或未定义 NaN 时执行查询：

const { loading, error, data } = useQuery(LAUNCH_QUERY, {
    variables: { flight_number: flightNum },
    skip: Number.isNaN(flightNum),
  });

推荐阅读