如何在组件 Gatsby 中运行 GraphQL 查询答案

【问题标题】：How to run GraphQL query not in component Gatsby如何在组件 Gatsby 中运行 GraphQL 查询
【发布时间】：2019-12-21 21:03:40
【问题描述】：

我需要使用 graphQl 将源数据传递给 cms 配置，但是当我尝试使用它时出现错误非页面组件“C:/Users/NikitaSeliverstov/Desktop/amblik/src/cms/cms.js”中的GraphQL查询将不会运行。如何在非页面组件中运行查询？

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

目前不可能。只有在组件中或 gatsby-node api 中的 createPages 中才能运行 graphql 查询。

【讨论】：

【解决方案2】：

如果您使用的是 Apollo 客户端，请尝试在可以从应用程序调用的服务类中启动客户端。 apollo-link-http 库将向您的 GraphQL API 发送一个获取请求。

import { createHttpLink } from 'apollo-link-http';
import gql from 'graphql-tag';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
    link: createHttpLink({uri: "http://localhost:8000/graphql", credentials: 'include'}),
    cache: new InMemoryCache({
            addTypename: false
    })
});
class dataService {
    async fetchData(){
    return await client.query({
        query: gql`query FETCH_DATA{
            fetchData{
                data1
                data2
                data3
             }
         }`,
     });
 }

【讨论】：

我试过了，它似乎在工作，但只是在开发中，因为在构建 graphQL 后关闭
您需要将 URI 更改为托管 GraphQL API 的位置。它可能因环境而异。