如何将变量传递给 GraphQL 过滤器查询？

Question

我想看看是否有可能将变量传递给我的查询。

这是我的组件data.js

export default function Data() {
    const data = useStaticQuery(
        graphql`
            query {
                allGoogleSheetDataRow(filter: { state: { eq: "ALABAMA" } }) {
                    edges {
                        node {
                            snap
                            tanf
                            medicaid
                            unemployment
                        }
                    }
                }
            }
        `
    );
    return (
    .
    .
    . 
    .
    );
}

然后

import DATA from './src/components/data'

<DATA />

这就是我目前正在做的事情，如果只有一页也没关系。我认为使组件“可重用”的正确方法，所以在这里我想知道如何将变量传递给我的过滤器

allGoogleSheetDataRow(filter: { state: { eq: "--- some variable --" } })

所以我可以导入它

import DATA from './src/components/data'

<DATA state="ALABAMA" />

知情人士可以为我指出正确的方向吗？

谢谢。

Answer 1

如果你使用的是盖茨比（我认为它来自于盖茨useStaticQuery比），那么你就不能。名称中的ThereStatic意味着您不能在其中使用变量。可悲的是:(

您可能可以在这里阅读更多相关信息：https://spectrum.chat/gatsby-js/general/using-variables-in-a-staticquery~abee4d1d-6bc4-4202-afb2-38326d91bd05

或者，您可以创建一个自定义的“useQuery”，这是一种命名返回值的函数的奇特方式。;)

为此你有：

const useCustomQuery = () => {
  const data = useStaticQuery(
    graphql`
      query {
          allGoogleSheetDataRow(filter: { state: { eq: "ALABAMA" } }) {
              edges {
                  node {
                      snap
                      tanf
                      medicaid
                      unemployment
                  }
              }
          }
      }
    `
  );
  return data
}

在您的“页面”或任何需要数据的组件中，您只需使用

const Component = () => {
  const data = useCustomQuery()

  // use data anyway you want
}