在Gatsby中,静态页面(即/pages
中定义的组件)和动态页面(即gatsby-node.j
中创建的“页面”)都可以通过导出查询来依赖GraphQL数据变量。但是,静态页面需要带有graphql
标签的字符串,而动态页面只需要一个字符串:
// /pages/index.js
export const query = graphql`*QUERY*`;
vs。
// gatsby-node.js
export const query = `*QUERY*`;
如果我尝试使用字符串插值来将字符串与标签一起使用:
export const query = graphql`${actualQuery}*`;
我得到一个错误,因为该标记不允许字符串插值。
我意识到我可以保留两个查询副本:一个为纯字符串,然后为相同的“标记”副本……但是,肯定有某种方法可以避免这种重复?
编辑:这是相关代码:
// gatsby-node.js
export const createPages = async ({ graphql, actions: { createPage } }) => {
// This requires a GRAPHQL *string*
const { data } = await graphql(sharedQuery);
data.someData.forEach((pageData) => {
createPage({
path: pageData.path,
component: pathUtil.resolve('src/templates/SomePage.js'),
context: { pageData }
});
});
});
// pages/index.js
// This version requires a *tagged template literal*
export const query = sharedQuery;
const IndexPage = ({ data }) => { // ... page component that uses data
export default IndexPage;