如何使用react-apollo运行graphQL查询？-Java 学习之路

我的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,
  },
 };
};

但没有任何反应 . 刚加载：true . 我正在使用apollo-client并根据文档（我认为）将它全部连接起来 . 我的意思是我使用connect（mapQueriesToProps）等 .

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

这是我对阿波罗的第一次考验 . 任何指导都表示赞赏，因为这些文档对于初学者来说相当吝啬 .

2 回答

0

您是否尝试过命名查询？即写 query abc { 而不是 query { . 如果这样可以解决问题，那么您应该在react-apollo上提出问题 .

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

回复于 2024-05-15T19:05:04+08:00

奇怪的是，这个 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所提到的，你也应该为你的查询命名 .

回复于 2024-05-15T19:05:04+08:00

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

2 回答

相关问题