使用 React Hook 动态设置 GraphQL 变量不起作用
Setting GraphQL variable dynamically with React Hook is not working
我正在使用 useEffect 和 useState 反应挂钩在 select 更改事件上设置 GraphQL 变量,并根据第一个下拉列表的选项 select 使用数据填充第二个 select =25=]编辑,
所以当我选择选项 A 时,gql 变量应该像这样更新:
{
variables: {
selectedOption: "A"
}
}
但不知何故 selectOption 未在 useEffect() 上设置。在 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;
请注意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
}
}
}
}
}
}
}
}
`;
好的,我发现 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 的帮助!
我正在使用 useEffect 和 useState 反应挂钩在 select 更改事件上设置 GraphQL 变量,并根据第一个下拉列表的选项 select 使用数据填充第二个 select =25=]编辑,
所以当我选择选项 A 时,gql 变量应该像这样更新:
{
variables: {
selectedOption: "A"
}
}
但不知何故 selectOption 未在 useEffect() 上设置。在 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;
请注意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
}
}
}
}
}
}
}
}
`;
好的,我发现 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 的帮助!