如何在调用Apollo Graph QL查询之前等待服务器响应？

编程问答 2022-11-01

问题描述

我在从useEffect挂钩接收数据后尝试调用Graph QL查询。我需要来自响应的数据以在查询中使用。但是不能有条件地调用钩子。但是，如果我取消条件，则loadAnime将是未定义的。我如何摆脱这种束缚？

import React,{ useEffect,useState } from "react";
import { useParams } from "react-router-dom";
import AnimeBanner from "../components/AnimeBanner";
import { useHttpClient } from "../Hooks/http-hook";
import { GetAnimeData } from "../GraphQLFunctions";
import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

const GET_ANIME_INFO = gql`
  query GetAnimeInfo($name: String!) {
    Media(search: $name) {
      title {
        romaji
        english
        native
        userPreferred
      }
      episodes
      id
      bannerImage
    }
  }
`;

const Anime = (props) => {
  //Logic for getting anime data from mongoDB (episodes,name,cover image)
  const { isLoading,error,sendRequest } = useHttpClient();
  const [loadedAnime,setloadedAnime] = useState();
  const URLTitle = useParams().URLTitle;

  useEffect(() => {
    const fetchAnime = async () => {
      try {
        const responseData = await sendRequest(
          "http://localhost:5000/api/anime/" + URLTitle
        );
        setloadedAnime(responseData.animeData[0]);
      } catch (err) {
        console.log(err);
      }
    };
    fetchAnime();
  },[sendRequest,URLTitle]);

  if (isLoading || error) {
    return null;
  }

  //Logic for getting anime data from anilist (Descriptions,tags,banner,trailer,etc.)
  const { apiData,apiLoading,apiError } = useQuery(GET_ANIME_INFO,{
    variables: {
      name: loadedAnime.anime_name,},});

  if (apiLoading || apiError) {
    return null;
  }

  return <AnimeBanner src={apiData.Media.bannerImage} />;
};

export default Anime;

解决方法

简短答案：您可以检出useLazyQuery而不是useQuery。

文档链接：https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

当React挂载并呈现一个调用useQuery钩子的组件时，Apollo Client将自动执行指定的查询。但是，如果您想响应其他事件（例如用户单击按钮）来执行查询，该怎么办？

useLazyQuery挂钩非常适合响应组件渲染以外的事件执行查询。该挂钩的行为与useQ​​uery一样，但有一个关键的例外：调用useLazyQuery时，它不会立即执行其关联的查询。相反，它在结果元组中返回一个函数，您随时可以执行查询时就可以调用该函数

import React,{ useState } from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
  const [dog,setDog] = useState(null);
  const [getDog,{ loading,data }] = useLazyQuery(GET_DOG_PHOTO);

  if (loading) return <p>Loading ...</p>;

  if (data && data.dog) {
    setDog(data.dog);
  }

  return (
    <div>
      {dog && <img src={dog.displayImage} />}
      <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
        Click me!
      </button>
    </div>
  );
}

,

您可以在await完成后调用查询，也可以在api调用后更新状态后在另一个useEffect中调用查询。一般来说，像这样

const [state,setState] = useState({})

useEffect(async () => {
    const result = await get('/api/blah-blah-blah')

    // run your query here now that the await has resolved
},[someDependency])

或

const [state,setState] = useState({})

useEffect(async () => {
    const result = await get('/api/blah-blah-blah')

    setState(result)
},[someDependency])

useEffect(() => {
   if(state.id) {
       // run the query
   }
},[state.someProp])
apolloapolloapollogqljavascriptreactjsreactjsreactjsreactjs