使用 React Hook 动态设置 GraphQL 变量不起作用

Question

我正在使用 useEffect 和 useState react hook 在 select 更改事件上设置 GraphQL 变量并填充第二个 select 的数据，具体取决于选择的第一个下拉选项

所以当我选择选项 A 时，gql 变量应该像这样更新：

{
  variables: {
     selectedOption: "A"
  }
}

但不知何故，未在 useEffect() 上设置 selectOption。 在 useEffect 之外，selectOption 受 setSelectOption 影响。

我究竟做错了什么？

我的 GraphQL 查询：

import {gql} from "@apollo/client";

export const GET_SELECT = gql`
query getSelect($selectedOption: String!) {
  categories(where: {name: $selectedOption}) {
    edges {
      node {
        children {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`;

我的反应组件

import React, {useState, useEffect} from 'react';
import {useQuery} from "@apollo/client";
import {GET_SELECT} from "./app/queries/get-select";


const FilterBar = ({options}) => {
    const [ selectOption, setSelectOption] = useState('');
    const { data, loading, error } = useQuery(GET_SELECT, {
        variables: {
            selectedOption: selectOption
        }
    });


    useEffect(() => {
        setSelectOption(data?.categories?.edges?.map(first => first?.node?.children?.edges?.map(second => second?.node?.name)));
        console.log('select option' + selectOption);
    }, [data, setSelectOption]);


    if (loading) return "Loading...";
    if (error) return <pre>{( error?.message )}</pre>


    return (
        <>
            <select onChange={(e) => setSelectOption(e.target.value)}>
                <option value="">Select option</option>
                <option value="A">Option A</option>
                <option value="B">Option B</option>
                <option value="C">Option C</option>
            </select>
            <br/>
            <select>
                <option value="">Select data</option>
                {data &&
                    data?.map(opt =>
                        <option value={opt} key={opt}>{opt}</option>
                    )
                }
            </select>
        </>
    )
}


export default FilterBar;

Answer 1

请注意setSelectOption不会立即更新该值。 因此，如果您想查看该行之后的更改，请尝试将selectOption添加为依赖项或创建仅包含selectOption的新useEffect块

useEffect(() => {
  setSelectOption(data?.categories?.edges?.map(first => first?.node?.children?.edges?.map(second => second?.node?.name)));
  console.log('select option' + selectOption);
}, [data, setSelectOption, selectOption]);

或者

useEffect(() => {
  console.log('select option' + selectOption);
}, [selectOption])

Answer 2

好的，我发现 Graphql 变量“名称”正在返回一个数组，所以我不得不像这样更改查询：

const GET_SELECT = gql` 
query getSelect($selectedOption: [String!]) {
  categories(where: {name: $selectedOption}) {
    edges {
      node {
        children {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`;

在反应组件中：

const { data, loading, error } = useQuery(GET_SELECT, {
        variables: { name: [selectOption] },
    });

现在一切正常无论如何......感谢@endmaster0809的帮助！