可以使用过滤器进行 gatsby 静态查询吗？

Question

可以使用过滤器进行静态查询吗？

我使用strapi作为我的配置服务器

我将在构建时收集配置数据

我有一个组件需要通过用户数据（例如用户组）查询配置数据

但是 gatsby 似乎不允许我将任何 var 传递给查询，甚至不允许使用参数对查询进行硬编码

例如

graphql`
query MyQuery {
allStrapiAvailableLanguageByMarkets(filter: {country: {code: {eq: "CA"}}}) {
nodes {
country {
code
}
languages {
code
name
}
}
}
}`

Answer 1

StaticQuery 有它自己的限制（这就是它们被称为静态的原因）并且它们不允许任何动态参数。正如它所显示的Gatsby documention：

StaticQuery 与页面查询有何不同

StaticQuery 可以做大部分的 页面可以查询的东西，包括片段。主要区别 是：

• 页面查询可以接受变量（通过 pageContext），但只能是 添加到页面组件中
• StaticQuery 不接受变量（因此 名称“静态”），但可以在任何组件中使用，包括页面
• StaticQuery 不适用于原始 React.createElement 调用；请 使用 JSX，例如

当然，您可以使用硬编码值进行过滤，这实际上是您无法使用动态值进行过滤的唯一可用解决方案。

检查您的 localhost:8000/___graphql 游乐场，看看您的查询是否有效（应该）。通常 GraphQL 中的链式值必须使用 filter: { country__code: { eq:"CA" }} 过滤

理想情况下，您的 useStaticQuery 挂钩文件应如下所示：

import { graphql, useStaticQuery } from 'gatsby';

export const useYourItems = () => {
  const yourItems  = useStaticQuery(
    graphql`
        query MyQuery {
            allStrapiAvailableLanguageByMarkets(filter: {country: {code: {eq: "CA"}}}) {
                nodes {
                    country {
                        code
                    }
                    languages {
                        code
                        name
                    }
                }
            }
        }`,
  );

  return yourItems.allStrapiAvailableLanguageByMarkets;
};

然后，在另一个组件中：

  const yourItems = useYourItems();