在 Gatsby 中的 JSX 组件之外进行 graphql 查询

Question

我有一个 .ts(不是 .tsx) 文件，它只导出一个 json 对象，例如

const obj = {
    img1: gql_img1,
    img2: gql_img2
}

我希望 gq1_img1 和 gq1_img2 成为 graphql 查询的结果

我找到了solution which uses Apollo Client,，但看起来他们没有使用 Gatsby，而且我认为 Gatsby 没有使用客户端。

使用useStaticQuery的问题在于它是一个钩子，如果我尝试像下面的sn-p那样使用它，我会得到"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"

const gql = () => {
    
    const gql = useStaticQuery(graphql
        `query adQuery {
            invoiceNinja300x250: file(
                extension: {regex: "/(jpg)|(jpeg)|(png)/"},
                name: {eq: "IN-300x250-2"}
            ){
                childImageSharp {
                    fluid(maxWidth: 250) {
                        ...GatsbyImageSharpFluid_withWebp_noBase64
                    }
                }
            },
            invoiceNinja600x300: file(
                extension: {regex: "/(jpg)|(jpeg)|(png)/"},
                name: {eq: "IN-600x300-2"}
            ){
                childImageSharp {
                    fluid(maxWidth: 250) {
                        ...GatsbyImageSharpFluid_withWebp_noBase64
                    }
                }
            }
        }`
        
        )
    return gql
}

    const GQL = gql() 

Answer 1

你考虑过 React Context API 吗？在生产 Gatsby 应用程序中，我使用的就是我们用于全局变量（例如一些 JSON/对象数据）的方法。它允许您在某种高级/布局/数据层组件中将从不同文件中获得的一些值填充到您的应用程序中以与其他组件一起使用。

Answer 2

就像我在您的 reddit 帖子中提到的那样，如果您不使用页面查询或静态查询，您将需要 Apollo 客户端或其他一些 gql 客户端。

我找到了一个使用 Apollo 客户端的解决方案，但看起来他们没有使用 Gatsby，而且我认为 Gatsby 没有使用客户端。

Gatsby 和 GraphQL 客户端是不同的东西。 Gatsby 是一个用于构建静态网站的 React 框架，并使用 graphQL 以各种方式获取数据。 GraphQL 客户端很像 fetch 或 axios，它们是用于从 REST API 请求、发布、更新、删除数据的库。

你能解释一下你的用例吗？也许还有一种更盖茨比的方式。