使用ReactHook動態設定GraphQL變數不起作用

我正在使用 useEffect 和 useState react 鉤子在選擇更改事件上設定 GraphQL 變數，并根據選擇的第一個下拉串列的哪個選項用資料填充第二個選擇，

所以當我選擇選項 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;

uj5u.com熱心網友回復：

請注意setSelectOption不要立即更新值。因此，如果您想查看該行之后的更改，請嘗試添加selectOption為依賴項或創建useEffect僅包含的新塊selectOption

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

對于您的 Graphql 查詢，請嘗試以下代碼。

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

uj5u.com熱心網友回復：

好的，我發現 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的幫助！

標籤：反应 变量 图形 阿波罗 apollo-client

上一篇：(Python)這個函式中的語法“slider.var”是什么意思

下一篇：如何在RadStudio中生成安裝程式？