如何在调用阿波罗图QL查询之前等待服务器响应？
如何在调用阿波罗图QL查询之前等待服务器响应？
提问于 2020-08-13 01:12:53
在从我的useEffect钩子中接收数据后，我试图调用Graph查询。我需要在查询中使用响应中的数据。但是，不能有条件地调用钩子。但是，如果我去掉条件，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;回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-20 20:17:38
简短的回答:您可以签出useLazyQuery而不是useQuery。
文档链接：https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually
当React挂载并呈现一个调用useQuery钩子的组件时，阿波罗客户端会自动执行指定的查询。但是，如果您想要执行一个查询以响应不同的事件，例如用户单击一个按钮呢？
useLazyQuery钩子非常适合执行查询，以响应组件呈现以外的事件。这个钩子的作用类似于useQuery，但有一个关键的例外:当调用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>
);
}
Stack Overflow用户
发布于 2020-08-13 01:33:14
您可以在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])页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63386698
复制相关文章
相似问题
腾讯云开发者
