如何在React中随Modal状态变化刷新GraphQL查询数据

要实现Modal状态切换时重新拉取问题数据，你可以借助Apollo Client的useQuery返回的refetch方法，配合React的useEffect监听modal状态变化来触发重新请求：

步骤1：补充缺失导入并解构refetch #

先确保导入useState和useEffect，再从useQuery返回值中解构出refetch方法，这是触发手动重新请求的核心函数。

步骤2：添加状态监听逻辑 #

通过useEffect监听modal状态的变化，一旦状态切换就调用refetch重新获取数据。

修改后的完整代码如下：

import { useQuery, gql } from "@apollo/client";
import { useState, useEffect } from "react";

const Questions = () => {
    const [modal, setModal] = useState(false)
    
    const QUESTION_QUERIES = gql`
        query getQuestions(
            $subjectRef: ID
            $gradeRef: ID
            $chapterRef: ID
            $status: String
            ) {
            getQuestions(
                subjectRef: $subjectRef
                gradeRef: $gradeRef
                chapterRef: $chapterRef
                status: $status
            ) {
                id
                question_info
                question_type
                answer
                level
                published
                subjectRef
                gradeRef
                chapterRef
                levelRef
                streamRef
                curriculumRef
                options
                status
                subject
                grade
                chapter
                stream
                curriculum
            }
        }
    `;

    const { loading, error, data, refetch } = useQuery(QUESTION_QUERIES);

    // 监听modal状态变化，触发重新请求
    useEffect(() => {
        refetch();
    }, [modal, refetch]);

    return (
        <div>
            {/* 示例：添加切换Modal状态的按钮 */}
            <button onClick={() => setModal(!modal)}>
                {modal ? '关闭Modal' : '打开Modal'}
            </button>
        </div>
    )
}

export default Questions;

额外说明 #

• 如果查询需要传入动态变量（比如$subjectRef），调用refetch时可以传入最新变量值，例如refetch({ subjectRef: currentSelectedSubjectId })
• 若仅需在Modal关闭时重新获取数据，可在useEffect中添加条件判断：if (!modal) refetch();

内容的提问来源于stack exchange，提问作者Kiran S youtube channel