使用React Hook动态设置GraphQL变量无效

Question

我正在使用useEffect和useState react钩子在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
}
}
}
}
}
}
}
`;

我的React组件

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

对于Graphql查询，请尝试以下代码。

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

Answer 2

ok我发现Graphql变量'name'正在返回一个数组，所以我不得不像这样更改查询：

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的帮助！