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

在从useEffect挂钩接收数据后，我尝试调用Graph QL查询。我需要在查询中使用响应中的数据。但是，不能有条件地调用挂钩。但是，如果我去掉条件，loadedAnime将是未定义的。我怎样才能摆脱这种束缚

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;

import React，{useffect，useState}来自“React”；
从“react router dom”导入{useParams}；
从“./组件/AnimeBanner”导入AnimeBanner；
从“./Hooks/httphook”导入{useHttpClient}；
从“./GraphQLFunctions”导入{GetAnimeData}；
从“@apollo/react hooks”导入{useQuery}”；
从“graphql标签”导入gql；
const GET_ANIME_INFO=gql`
查询GetAnimeInfo（$name:String！）{
媒体（搜索：$name）{
头衔{
罗马书
英语
本地的
用户首选
}
插曲
身份证件
横幅广告
}
}
`;
常量动画=（道具）=>{
//从mongoDB获取动画数据的逻辑（情节、名称、封面图像）
const{isLoading，error，sendRequest}=useHttpClient（）；
常量[loadedAnime，setloadedAnime]=useState（）；
const urltTitle=useParams（）.urltTitle；
useffect（（）=>{
const fetchAnime=async（）=>{
试一试{
const responseData=等待发送请求(
"http://localhost:5000/api/anime/“+URLTitle
);
已加载的动物（responseData.animeData[0]）；
}捕捉（错误）{
控制台日志（err）；
}
};
抓取动画（）；
}，[sendRequest，URLTitle]）；
如果（isLoading | |错误）{
返回null；
}
//从anilist获取动画数据的逻辑（描述、标签、横幅、预告片等）
const{apiData，apiLoading，apirerror}=useQuery（获取动画信息{
变量：{
名称：loadedAnime.anime\u名称，
},
});
if（APIload | | apiError）{
返回null；
}
返回；
};
导出默认动画；

您可以在

wait

完成后调用查询，也可以在api调用后更新状态后在另一个

useffect

中调用查询。一般来说，像这样的事情

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])

或

---

您可以在

wait

完成后调用查询，也可以在api调用后更新状态后在另一个

useffect

中调用查询。一般来说，像这样的事情

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])

或

---

简短回答：您可以签出useLazyQuery而不是useQuery

文档链接：

---

当React装载并呈现调用useQuery挂钩的组件时，Apollo客户端自动执行指定的查询。但是，如果您希望执行查询以响应不同的事件，例如用户单击按钮，该怎么办

useLazyQuery钩子非常适合于执行查询以响应组件呈现以外的事件。这个钩子的作用与useQuery类似，但有一个关键的例外：当调用useLazyQuery时，它不会立即执行其关联的查询。相反，它在其结果元组中返回一个函数，您可以在准备执行查询时调用该函数

import React，{useState}来自“React”；
从'@apollo/client'导入{useLazyQuery}；
函数DelayedQuery（）{
const[dog，setDog]=useState（null）；
const[getDog，{loading，data}]=useLazyQuery（GET_DOG_PHOTO）；
如果（加载）返回加载…
；
if（data&&data.dog）{
setDog（data.dog）；
}
返回(
{狗&&}
getDog（{变量：{品种：{斗牛犬}}）}>
点击我！
);
}

简短回答：您可以签出useLazyQuery而不是useQuery

文档链接：

---

当React装载并呈现调用useQuery挂钩的组件时，Apollo客户端自动执行指定的查询。但是，如果您希望执行查询以响应不同的事件，例如用户单击按钮，该怎么办

useLazyQuery钩子非常适合于执行查询以响应组件呈现以外的事件。这个钩子的作用与useQuery类似，但有一个关键的例外：当调用useLazyQuery时，它不会立即执行其关联的查询。相反，它在其结果元组中返回一个函数，您可以在准备执行查询时调用该函数

import React，{useState}来自“React”；
从'@apollo/client'导入{useLazyQuery}；
函数DelayedQuery（）{
const[dog，setDog]=useState（null）；
const[getDog，{loading，data}]=useLazyQuery（GET_DOG_PHOTO）；
如果（加载）返回加载…
；
if（data&&data.dog）{
setDog（data.dog）；
}
返回(
{狗&&}
getDog（{变量：{品种：{斗牛犬}}）}>
点击我！
);
}

我无法使用这两种方法中的任何一种，使用这两种方法我都会收到错误“React Hook”useQuery“无法在回调useeffect中调用”。这可能是我自己的错误。但我已经使用Apollo在收到服务器响应后调用的LazyQuery实现了它。谢谢你！我无法使用这两种方法中的任何一种，使用这两种方法我都会收到错误“React Hook”useQuery“不能在回调useffect中调用”。这可能是我自己的错误。但我已经使用Apollo在收到服务器响应后调用的LazyQuery实现了它。谢谢你！