gatsby-source-prismic-graphql icon indicating copy to clipboard operation
gatsby-source-prismic-graphql copied to clipboard

Option to use custom createPages config

Open lwkchan opened this issue 6 years ago • 4 comments

I came across what I thought was an issue, where I was trying to create pages like so in my own createPages file. After the pages were built, I was unable to access the context id that i used in the createPage function param.

However, I managed to fix my issue by commenting out gatsby-source-prismic-graphql's createPages function in my node_modules. This is because, when I had my issue, the plugin's createPage function in gatsby-node was overwriting the pages that I had created.

This is what my plugin looked like in gatsby-config:

 {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: 'my-repo-name',
        accessToken: `xxx`
      }
    }

Here is my code for reference

const createNewsArticles = async ({actions, graphql, reporter}) => {
  const {createPage} = actions;
  const result = await graphql(`
    query MyQuery {
      prismic {
        allNews_articles {
          edges {
            node {
              _meta {
                id
              }
              title
              publish_date
            }
          }
        }
      }
    }
  `);

  result.data.prismic.allNews_articles.edges.forEach(({node}) => {
    // make the slug
    const title = node.title[0].text;
    const publishDate = new Date(node.publish_date);
    const slugDate = `${publishDate.getUTCDate()}-${publishDate.getUTCMonth()}-${publishDate.getUTCFullYear()}`;
    const slug = `${slugDate}-${title.replace(/\s+/g, '-').toLowerCase()}`;

    // eslint-disable-next-line no-underscore-dangle
    const {id} = node._meta;

    createPage({
      path: slug,
      component: path.resolve(`src/Templates/NewsArticle.tsx`),
      context: {
        id
      }
    });
  });
};

exports.createPages = createNewsArticles

Feature request

If no pages option is provided in the plugin options, the plugin won't run its internal createPage functions.

This would be useful if the user wants to pass in a more complex pageContext, which sources from somewhere outside of the world of the plugin.

lwkchan avatar Mar 18 '20 13:03 lwkchan

I believe this is related. I'm attempting to add lang to page context, for non-Prismic pages in /src/pages. There's some collision between my onCreatePage and the createPage used by this plugin, resulting in an infinite loop. I can't figure this out, so going to remove page generation from this plugin and do it all by hand in gatsby-node.js.

gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: process.env.PRISMIC_NAME,
        defaultLang: process.env.GATSBY_PRISMIC_LANG,
        accessToken: process.env.PRISMIC_KEY,
        path: '/preview',
        previews: false,
        pages: [
          {
            type: 'Post',
            match: '/blog/:uid',
            path: '/blog',
            component: require.resolve('./src/templates/post.js'),
          },
          {
            type: 'Product',
            match: '/products/:uid',
            path: '/products',
            component: require.resolve('./src/templates/product.js'),
          },
        ],
      },
    },
  ],
};

gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions;
  
  deletePage(page);
  createPage({
    ...page,
    context: {
      ...page.context,
      lang: process.env.GATSBY_PRISMIC_LANG,
    },
  });
};

mattrosno avatar Mar 21 '20 16:03 mattrosno

@mattrosno -- I had a similar issue when integrating with prismic, whereby when i wanted to add a context.locale to the non-prisimic pages (pages generated by a custom createPages function as you'vev shown above), it did an infinite loop.

What i did to solve that was to add a line in onCreatePage to say:

exports.onCreatePage = ({ page, actions }) => {
  // if the page already has a locale defined, break out
  if(page.context && page.context.locale) {
    return;
  }

  // continue with building pages which don't have locale
};

However, it was after soliving this issue that I ran into the issue specified by my original post here. So I agree, I do thing these issues are somehow related to clashing createPages calls.

lwkchan avatar Mar 23 '20 09:03 lwkchan

@lwkchan same! I put in a similar short circuit, to prevent deletePage and createPage from running on any page with context.lang.

mattrosno avatar Mar 26 '20 14:03 mattrosno

Hi, I also have just hit this limitation.

In my scenario, I am trying to load data from Prismic for a Homepage that has many small articles. In this case it's not a lot of data, but it is > 20 documents and I hit Prismic's document limit (which is very annoying by the way).

To get around this, I traverse all pages in gatsby-node.js in a custom createPages config, as @lwkchan does, and combine the results of the queries into a single result object and create a page for it.

This breaks previews thoroughly.

martaver avatar Apr 02 '20 09:04 martaver