如何使用react apollo运行graphQL查询

Question

My 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客户端，并根据文档（我想）将其全部连接起来。我的意思是我正在使用connect（mapQueriesToProps）等

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

这是我对阿波罗的第一次测试。感谢任何指导，因为文档对于初学者来说相当吝啬。

Answer 1

您尝试过命名查询吗？即写query abc {而不是只写query {。如果这解决了问题，您应该在react apollo上提交一个问题。

如果它不起作用，你可以开始缩小错误范围，方法是检查控制台中是否有任何错误，如果浏览器真的发出了请求，则在网络选项卡中进行检查。

Answer 2

奇怪的是，这个1st方法对我有效…

假设：

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将显示您的查询结果。

这个2nd方法也有效（可能是最好的方法）：

const getSources = graphql(gql`
   _your_query_here_
`);
const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(getSources(YourContainer));

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