prismicio-community / gatsby-starter-prismic-blog

Blog project with Gatsby & Prismic

Prismic + Gatsby Blog Starter

This sample blog is an excellent starting point to explore Gatsby and Prismic. Get it up and running in minutes. Modify and adapt it to your liking; it's all yours!

• Demo: Open live demo
• Learn more about Prismic and Gatsby: Prismic Gatsby Documentation

 

 

🚀 Quick Start

To start a new project using this starter, run the following command in your terminal:

npx prismic-cli@latest theme --theme-url https://github.com/prismicio-community/gatsby-starter-prismic-blog --conf sm.json

The command will do the following:

1. Start a new Gatsby project using this starter.
2. Ask you to log in to Prismic or create an account.
3. Create a new Prismic content repository with sample content.

When you're ready to start your project, run the following command:

npm run develop

Documentation

To learn how to work with your new project, see this starter's docs.

To learn more about working with Prismic, see the Prismic docs.

License

Copyright 2013-2022 Prismic <[email protected]> (https://prismic.io)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

gatsby-starter-prismic-blog's Issues

TypeError: t is null

Followed your tutorial below, but getting an error in the browser.
https://user-guides.prismic.io/en/articles/2933292-sample-blog-with-api-based-cms-gatsby-js

TypeError: t is null

Any ideas?

gatsby build with childImageSharp in query will fail unless gatsby develop is ran first

When querying for the 'sharp' version of an image field gatsby build will fail unless gatsby develop is ran first. This results in not being able to deploy.

I have replicated this issue with a fresh pull of this repo and only making this change to the query on the post.js template to ensure that it wasn't any of my other template changes:

... on PRISMIC_PostBodyImage_with_caption{
    type
    label
    primary{
        image
        imageSharp {
            absolutePath
            childImageSharp {
                fluid(maxWidth: 800) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
        caption
    }
}

Resulting in this error:

When trying to debug the changes I have noticed that there are no cached files created for gatsby-source-prismic-graphql on gatsby build. I removed .cache from .gitignore in order to be able to track the cache files created.

If I remove .cache from .gitignore and I follow the process of:

1. Run Gatsby build - this will fail with the above error and commit cache files
2. Run Gatsby develop - Will notice that a new redux directory has been created

3. Run Gatsby build - this will now succeed and the gatsby-source-prismic-graphql will also now be created and everything works as intended

If I was to repeat this process again and remove the created redux files from the cache directory after step 2 before running gatsby build again then the same initial error is given again so I think this is the route of the issue.

After looking in the code as much as I can I can't seem to find what is creating the redux files in the cache directory but I am not an expert at this.

If there is anything I can do to help with this issue please let me know as I am stuck but hit the wall in terms of what my expertise at this will help me debug. Thanks!

(Update - I have created a repo with the example build and the progressive cache commits incase this helps https://github.com/MatthewShields/issue--prismic-blog-gatsby-build)

Using previews with private prismic repository doesn't work.

Preview page remains stuck at loading screen when the prisimic repository isn private. I opened dev tools and discovered that there is a 401 error logged ton the console.

post.js always returns blank (empty array)

I was following this guide and managed to get things running (after some other odd errors):
https://intercom.help/prismicio/en/articles/2933292-sample-blog-with-api-based-cms-gatsby-js

However, when navigating to a blog post after running gatsby develop, it simply shows a blank page. In the Prismic repository, all fields are filled in as expected.

Logging props.data.prismic.allPosts.edges in post.js reveals an empty array. No matter what post is navigated to, it's simply blank.

I feel like there's an issue with the setup/query that fetches the post. It's almost as if the UID is not getting passed correctly?

If I try the query in the GraphiQL playground with the post UID it works but in the template, the exact same query does not return the post.

query BlogPostQuery($uid: String!) {
  prismic {
    allPosts(uid: $uid) {
      edges {
        node {
          _meta {
            id
            uid
            type
          }
          title
          date
          body {
            __typename
            ... on PRISMIC_PostBodyText {
              type
              label
              primary {
                text
              }
            }
            ... on PRISMIC_PostBodyQuote {
              type
              label
              primary {
                quote
              }
            }
            ... on PRISMIC_PostBodyImage_with_caption {
              type
              label
              primary {
                image
                caption
              }
            }
          }
        }
      }
    }
  }
}

See the screenshot:

Any ideas what's going on here? On the home page, the post is listed just fine (so of course it does exist).

There are no errors in the web console nor the terminal.

Thanks.