Call useQuery after retrieving router query object (NextJS with GraphQL)

Question

I am retrieving the query param in NextJS using: const qry_flightNumber = Number(router.query.flightNumber); Then i want to send a request to my GraphQL server by doing this: 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,
};

Dynamic PAGE containing the component ([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>
    </>
  );
}

The issue is have is that on first page load, the GraphQL query executes with flight_number being null. So i end up with this warning in console:

[GraphQL error]: Message: Variable "$flight_number" of non-null type "Int!" must not be null., Location: [object Object], Path: undefined

I have tried using an IF statement to make sure that flight_number is !NaN before running the query however react complains about the order of the hooks being called.

Obviously after the component has fully loaded, the GraphQl variable becomes defined and then executes correctly however I will still be getting the console warning.

Console warning screenshot:

What are my options to stop the console warning? Thank you.

Sorry i forgot to mention that my code does eventually work after but only after the query parameter is non null. — Rezzy
– Rezzy, Commented Feb 19, 2020 at 8:27
Did you try to remove the non-nullable operator ! in GraphQL ? Set flight_number as type Int instead of Int! — ddon-90
– ddon-90, Commented Feb 19, 2020 at 10:03
I could do but that would defeat the purpose of using strict types in GraphQl. The issue is to do with React component load time and not GraphQL. — Rezzy
– Rezzy, Commented Feb 19, 2020 at 14:09
What you are doing seems fine to me, I do the same thing in one of my Next.js apps and I am not having this issue. I am wondering if it could be something else. — ddon-90
– ddon-90, Commented Feb 19, 2020 at 15:17
I have added the full code on the page plus a screenshot of the error i am getting back from Graphql if that helps? Thank you. — Rezzy
– Rezzy, Commented Feb 19, 2020 at 23:23

Rezzy · Accepted Answer · 2020-02-20 12:45:22Z

5

I have got an answer to this now. You can pass a skip parameter to the useQuery to only exec the query if the variable is defined or not NaN:

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

answered Feb 20, 2020 at 12:45

Rezzy

3346 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crisu83 Over a year ago

Why not just check for flightNum === undefined? It is not really in scope to check whether or not the flightNum is of correct type.

Collectives™ on Stack Overflow

Call useQuery after retrieving router query object (NextJS with GraphQL)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related