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

时间:2020-06-26 20:49:13

标签: javascript gatsby

在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 个答案:

没有答案