如何使用 react-apollo 运行 graphQL 查询？

Posted 2023-03-08

【中文标题】如何使用 react-apollo 运行 graphQL 查询？

【英文标题】：How to run a graphQL query with react-apollo?

【发布时间】：2016-11-30 14:20:56

【问题描述】：

我的 GraphQLServer 查询：

query  
  sources 
    name
    id
   

像这样返回对象数组：

  "data": 
    "sources": [
      
        "name": "bootstrap.css",
        "id": 1
      ,
      
        "name": "normalize.css",
        "id": 2
      
    ]
  

试图了解如何从 React (redux) 调用它。我试过了：

function mapQueriesToProps( ownProps, state) 
 return 
   data: 
     query: gql`
      query 
        sources 
         id
         name
        
      
   `,
   forceFetch: false,
   returnPartialData: false,
  ,
 ;
;

但是什么也没发生。只需加载：是的。我正在使用 apollo-client 并根据文档（我认为）将其全部连接起来。我的意思是我正在使用 connect(mapQueriesToProps) 等。

查询实际何时运行？ 组件加载时会自动运行吗？ 我需要执行一个步骤来等待数据返回吗？ 组件如何知道等待数据？ 返回数组可以吗？我在文档中找不到任何返回数组的示例。 我只想运行一次，不做任何轮询或任何事情。这是唯一的方法吗？

这是我对 Apollo 的第一次测试。任何指导都值得赞赏，因为文档对于初学者来说相当简陋。

【参考方案1】：

您是否尝试过为查询命名？ IE。写query abc 而不仅仅是query 。如果这样可以解决问题，您应该在 react-apollo 上提交问题。

如果它不起作用，您可以通过检查控制台中是否有任何错误并在浏览器实际发出请求时检查网络选项卡来开始缩小错误范围。

【参考方案2】：

奇怪的是，这个第一种方法对我有用...

假设：

import gql from 'graphql-tag';
import  graphql  from 'react-apollo';

你也许可以（例如）：

const getSources = gql`
  query 
    sources 
     id
     name
    
  
`;

export default graphql(getSources) (connect(mapStateToProps, mapDispatchToProps)(YouContainer));

YouContainer props.data会有你的查询结果。

而且这个第二种方法也有效（可能是最好的方法）：

const getSources = graphql(gql`
   _your_query_here_
`);

const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(getSources(YourContainer));

正如@helfer 所提到的，您还应该为您的查询命名。

【讨论】：

有没有办法只在函数触发时调用查询，例如搜索和表单提交？