reactjs - 如何将变量传递给 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: "--- 一些变量 --"} })

所以我可以导入它

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

<DATA state="ALABAMA" />

有知情人士能指出我正确的方向吗？

谢谢。

Answer 1

如果您正在使用 Gatsby，我假设它是 useStaticQuery 的来源，那么您不能。名称中的 Static 意味着您不能在其中使用变量。可悲的是:(

您可能可以在这里阅读更多相关信息: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
}