使用 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的幫助！