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

【问题标题】：How to run a graphQL query with react-apollo?如何使用 react-apollo 运行 graphQL 查询？
【发布时间】：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 的第一次测试。任何指导都值得赞赏，因为文档对于初学者来说相当简陋。

【问题讨论】：

标签： reactjs redux graphql 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 所提到的，您还应该为您的查询命名。

【讨论】：

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