我正在使用 React 和 Apollo Client。
基于來自 GraphQL 回應的節點type值 ( nodes.type)，我想有條件地向下面的查詢NodeTypeOne或NodeTypeTwo.
// MyBlock.gql
export default gql`
query NodeTypeOne {
getNodesOne {
nodes {
id
type
title
}
}
}
`;
export default gql`
query NodeTypeTwo {
getNodesTwo {
nodes {
id
type
title
}
}
}
`;
所以在下面的 React 組件中，我想根據節點值有條件地發出 GraphQL 請求type。
import MyQuery from './MyBlock.gql';
const MyBlock = ({ data: myType }: Props) => {
const { data } = useQuery<GqlRes>(MyQuery);
const items =
data?.items?.map((node) => {
return {
id: node.id,
title: node.title,
};
}) || [];
return data?.items?.length ? (
<Slider items={items} />
) : null;
};
export default MyBlock;
我如何以一種干凈有效的方式做到這一點？
uj5u.com熱心網友回復：
您可以選擇多種設計模式來解決問題。對于您的用例，策略設計模式將順利運行。對于代碼參考，你可以谷歌搜索一堆示例。
這些來自我的參考：-
https://dev.to/wecarrasco/strategy-pattern-with-javascript-dha
https://gist.github.com/Integralist/5736427
uj5u.com熱心網友回復：
由于您的查詢將針對不同的決議器，因此您無法真正創建單個查詢來定位 getNodesOne 或 getNodesTwo 決議器。
另一方面， useQuery 只能接受一個預定義的查詢引數。
然后我會進行 2 個單獨的查詢，并使用 apolloClient 鉤子有條件地呼叫正確的查詢：
// MyBlock.gql
export const QUERY1 = gql`
query NodeTypeOne {
getNodesOne {
nodes {
id
type
title
}
}
}
`;
export const QUERY2 = gql`
query NodeTypeTwo {
getNodesTwo {
nodes {
id
type
title
}
}
}
`;
import {QUERY1, QUERY2} from './MyBlock.gql';
const MyBlock = ({ data: myType }: Props) => {
const client = useApolloClient()
const [data, setData] = useState(null)
useEffect(() => {
client.query({query: MyType === '?' ? QUERY1 : QUERY2})
.then(({data}) => setData(data))
.catch((err) => console.error(err))
}, [myType])
if(!data) return null /* or a loader... */
const items =
data?.items?.map((node) => {
return {
id: node.id,
title: node.title,
};
}) || [];
return data?.items?.length ? (
<Slider items={items} />
) : null;
};
export default MyBlock;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368345.html
標籤：反应 图形 apollo-client