使用 Apollo 客户端根据 React 组件中的节点类型值发出条件 GraphQL 请求

Posted 2023-02-21

【中文标题】使用 Apollo 客户端根据 React 组件中的节点类型值发出条件 GraphQL 请求

【英文标题】：Make conditional GraphQL request based on node type value in React component with Apollo Client

【发布时间】：2022-01-05 14:12:28

【问题描述】：

我正在使用 React 和 Apollo 客户端。

基于来自 GraphQL 响应的节点 type 值 (nodes.type)，我想有条件地向以下查询 NodeTypeOne 或 NodeTypeTwo 发出 GraphQL 请求。

// MyBlock.gql

export default gql`
  query NodeTypeOne 
    getNodesOne 
      nodes 
        id
        type
        title
      
    
  
`;

export default gql`
  query NodeTypeTwo 
    getNodesTwo 
      nodes 
        id
        type
        title
      
    
  
`;

所以在下面的 React 组件中，我想有条件地根据节点 type 值发出 GraphQL 请求。

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;

我如何以干净有效的方式做到这一点？

【参考方案1】：

由于您的查询将针对不同的解析器，因此您无法真正创建一个查询来定位 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;

【参考方案2】：

您可以选择多种设计模式来解决问题。对于您的用例，策略设计模式将顺利运行。 对于代码参考，你可以谷歌一堆例子。

这些来自我的参考：-

https://dev.to/wecarrasco/strategy-pattern-with-javascript-dha

https://gist.github.com/Integralist/5736427