Question

在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;

如何在静态页面和生成的页面之间共享查询？

0 个答案: