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

Posted 2023-03-08

技术标签:

【中文标题】在 Gatsby 中的 JSX 组件之外进行 graphql 查询【英文标题】：Make graphql query outside a JSX component in Gatsby 【发布时间】：2020-10-11 13:58:25 【问题描述】：

我有一个 .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()

【问题讨论】：

【参考方案1】：

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

【讨论】：

【参考方案2】：

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