Фильтрация данных в GraphQL Gatsby на основе состояния приложения

Question

Я создаю проект Gatsby, который показывает репозитории организации на GitHub с аналогичными функциями, такими как поиск GitHub:

Я могу добиться этого, используя следующий запрос graphQL в моем gatsby -config. js:

`query SearchQuery($q: String!) {
          search(query: $q, type: REPOSITORY, last: 6) {
            edges {
              node {
                ... on Repository {
                  name
                  description
                  stargazers {
                    totalCount
                  }
                  primaryLanguage {
                    name
                    color
                  }
                  id
                  issues {
                    totalCount
                  }
                  url
                  watchers {
                    totalCount
                  }
                }
              }
            }
          }
        }`

с переменными:

 q: "org:freeCodeCamp language:javascript"

Вопрос: Как установить язык, который я ищу, в зависимости от состояния приложения? Допустим, у меня есть Select Input со всеми языками программирования, и я хочу установить его с помощью хука useState и включить это значение в качестве запроса для фильтрации результатов.

const SelectBar = () => {
const [select, setSelect] = useState("")
const handleChange = (e) => {
    setSelect(e.target.value)
  }

  return (
    <StyledSelect value={select} onChange={(e) => handleChange(e)}>
      <option disabled={true} value="">
        Select language
      </option>
      <option value="javascript">JavaScript</option>
      <option value="css">CSS</option>
      <option selected value="swift">
        Swift
      </option>
      <option value="kotlin">Kotlin</option>
    </StyledSelect>
  )
}
}

Дело в том, что я не могу установить переменные в gatsby -конфиг. js. Так как мне это сделать? Запросить все возможные репозитории из GitHub graphQL API, а затем просто отфильтровать результаты на интерфейсе?

В REST API я бы просто установил свое состояние внутри URL-адреса с помощью шаблонных литералов. не могу просто установить переменную на q: `org:freeCodeCamp language:${select}`

Что мне здесь не хватает?