gatsbyjsでstaticQueryを使用する際に、パラメータにpropsの値を入れる方法
解決したいこと
2018年のissueで私と同じ疑問を持った方がいました。
内容を確認してみると値を動的に取得させてqueryに反映する場合は、ページクエリでしかできないみたいです。
https://github.com/gatsbyjs/gatsby/issues/8434
ただ、現状は問題が治っている可能性があるので、今回質問させていただきました。
通常のgraphqlは動的ページ作成にcontextを渡して、その中のparamを使用することはわかっているのですが、今回は、タイトル通りの内容なのですが、gatsbyのstaticQueryを使っている際にパラメーターにコンポーネントで使用している変数渡して使いたいです。
発生している問題・エラー
実装は下記になります。
import { graphql, useStaticQuery } from "gatsby";
~省略~
const Article = ({ pageContext }) => {
const { post } = pageContext;
const page = 30;
const contents = useStaticQuery(graphql`
query {
newServiceContents: hogeIndex(limit: ${page}) {
...contentsData
}
similarityServiceContents: hogeIndex(limit: ${page}) {
...contentsData
}
}
`);
return (
<Layout>
<Post
content={post}
newServiceContents={contents.newServiceContents}
similarityServiceContents={contents.similarityServiceContents}
/>
</Layout>
);
};
export default Article;
このように実装しています。
文字列連結のような形で変数を渡しているのですが、エラーが出てうまく行きません。
エラー
16 | const contents = useStaticQuery(graphql`
17 | query {
> 18 | newServiceContents: hogeIndex(limit: ${page}) {
| ^^^^^^^
19 | ...contentsData
20 | }
21 | similarityServiceContents: hogeIndex(limit: ${page}) {
0