将 GraphQL 查询结果作为没有 JSX 的对象反应？答案

【问题标题】：React GraphQL query results as an object without JSX?将 GraphQL 查询结果作为没有 JSX 的对象反应？
【发布时间】：2019-06-13 06:24:35
【问题描述】：

我作为最后的手段来这里！我已经搜索了 1-2 周，但没有遇到任何问题！

我想在 react 中使用 GraphQL（我有一个 Apollo react 客户端和 Apollo 后端），但我希望能够调用查询并将结果作为对象返回，而无需使用组件或类来完成.

我尝试过使用 client.query，但无论我尝试哪种方式，我都只会返回承诺。

我想要这样的东西：

const myData = 某种查询调用

编辑：

我想做的是将一个对象数组传递给一个组件，然后该组件将按照我想要的方式呈现数据。

例如，将事件列表传递到日历单元格中以显示当天。

这是我想做的一个更好的例子：

const CustomCellOne = () => (
<Query query={my_query} variables={ vars }>
    {({ loading, error, data }) => {
        const dataPoints = data.blahQuery;

        return (
            <CustomCellTwo data={dataPoints} />
        )
    }}
</Query>
);

【问题讨论】：

可以贴出代码示例吗？如果结果是 promises，你可以使用 then 块获得结果
如果你还没有找到它，a standard HTTP-level interface to GraphQL 应该很容易在没有专用库的情况下使用，但它总是涉及 Javascript 中的承诺或回调。
我已经添加了更多信息，我会尝试推荐的内容！谢谢！

标签： reactjs graphql apollo

【解决方案1】：

网络请求是异步的，以防止阻塞 UI。 Apollo 在后台使用的 Fetch API 利用 Promises 而不是更传统的回调来处理跨网络的异步请求资源，因此 Apollo 的 API 也是基于 Promises。没有可用的方法可以让您同步获取 GraphQL 查询 - 您只需要适当地构造代码以在 Promise 解析后处理它。

以下示例假定您已正确配置客户端实例。使用then：

function doSomething () {
  client.query({ query: SOME_QUERY })
    .then(({ data }) => {
      // Use the returned data however you like
    })
    .catch(error => {
      // Handle error
    })
}

使用异步/等待：

async function doSomething () {
  try {
    const { data } = await client.query({ query: SOME_QUERY })
  } catch (error) {
    // Handle error
  }
}

如果您不熟悉 Promises，请查看相应的 documentation 并查看一些 tutorials 对您有所帮助。

【讨论】：