Variable "$uid" of required type "String!" was not provided

[christian]

Hey Prismic,

TL;DR I am running into this issue opened on GitHub in 2019, but none of the suggestions provided do work for me.

I am currently running into an issue I've never had before (with the gatsby-source-prismic-graphql plugin), but no matter if I use the create page option inside gatsby-config.js or the traditional Gatsby way inside gatsby-node.js, the $uid variable does net get passed into my page component query (I am using a "normal" page query and not StaticQuery). The strange thing is I can open the pages locally in dev mode, but it breaks when deploying to Netlify or running the build command locally.

Nonetheless I get the following console error:

Variable "$uid" of required type "String!" was not provided.
// and
You might have a typo in the variable name "$uid" or you didn't provide the variable via context to this page query. Have a look at the docs to learn how to add data to context:
https://www.gatsbyjs.org/docs/page-query/#how-to-add-query-variables-to-a-page-query

What's interesting is, that the logged Gatsby link states a different way of passing a UID (i.e. with {eq: $uid}) but that one is not available via the source plugin.

The UID definitely gets passed into the createPage object, but it seams it never reaches the page component (I checked back with console logging the UID when creating the page and it get's logged correctly).

There was this Issue on GitHub, but reverting to the mentioned version does not help, neither does updating to the latest version help.

Here is my (shortened) query inside my page component:

export const query = graphql`
  query JournalPostQuery($uid: String!) {
    prismic {
      journal_post(lang: "en-us", uid: $uid) {
        hero_headline
        hero_headline_appearance
        hero_image
      }
    }
  }
`

Just for the sake of completeness — my currently used packages (please note, I've tried the versions mentioned in the GitHub issue as well as some of the latest versions, the error is always the same!)

"gatsby": "^2.19.17",
"gatsby-source-prismic-graphql": "^3.5.0",

Thank you

[marcellothearcane]

Where are you passing in the uid variable?

[christian]

Via the create Page function, either inside gatsby-node.js or the pages option inside gatsby-config.js:

Inside gatsby-node.js:

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {

    const journalPostPage = path.resolve('./src/pages/journal-post.js')
    resolve(
      graphql(
        `
        {
          prismic {
            allJournal_posts {
                edges {
                  node {
                    hero_headline
                    _meta {
                      uid
                    }
                  }
                }
              }
          }
        }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        const journalPosts = result.data.prismic.allJournal_posts.edges
        journalPosts.forEach((post, index) => {
          createPage({
            path: `/journal/${post.node._meta.uid}/`,
            component: journalPostPage,
            context: {
              uid: post.node._meta.uid,
            },
          })
          console.log("PAGE UID: " + post.node._meta.uid,)
        })
      })
    )

  })

}

inside gatsby-config.js

    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: `${process.env.PRISMIC_REPOSITORY_NAME}`,
        defaultLang: 'en-us',
        accessToken: `${process.env.PRISMIC_ACCESS_TOKEN}`,
        path: '/preview',
        previews: true,
        pages: [
           {
            type: 'Journal Post',
             match: '/journal/:uid',
             path: '/journal',
             component: require.resolve('./src/pages/journal-post.js'),
           },
         ]
      }
    }

[christian]

Just to make sure, I’ve tried both ways and therefor listed both ways, but I did not do it simultaneously!

[marcellothearcane]

Two things I’d try - renaming the variable to $slug or something, and also trying to console.log the context to see if the UID is getting set.

It sounds like the page query isn’t picking it up for some reason or another.

[Pau]

Hello @christian!

There are a few things to note here:

1. When creating dynamic pages with the Prismic Gatsby source plugin you should use the plugin config rather than the config in gatsby-node. Check out this other thread where i answered a related question:

Difference between using gatsby-node.js & plugins options for building pages dynamically

Hello Lance and welcome to the Prismic community forum! The differences are: With the gatsby-source-prismic-graphql plugin pages are dynamically generated inside the src/templates folder, and the necessary data for the queries is provided by the plugin as well as the URL slugs. And the gatsby-node.js file is the traditional Gatsby way of programmatically create pages from data. It requires a little bit more configuration like using the onCreateNode method for the URL slugs, and createPages fo…

2. In the config for the pages, dynamic pages need to be created under the templates folder. Try and changing your "page component' to that folder, change the route in the plugin config and try again.

3. Since the plugin passes dynamic data to the queries, the lang parameter should be a variable instead of a literal value. Read How to dynamically query documents by language

4. This is an extra validation that is not related but important. When retrieving the data in your templates you must Adding a validation check.

[christian]

Thank your for getting back @Pau

Good to know, I’ve always thought the templates folder name as well as creating the pages is more of type of choice.

Will give it a try. Thanks.

[Pau]

Neat! @christian you’re welcome!
You can chose to create pages under the /pages folder, it’s just that they’re not going to be dynamic.

[MolemiEd (MolemiEditor)]

Hello. I am struggling to get the dynamic blog pages working.
Changed the route, and the linkresolver seems to work as now looking for the blog page here:
http://localhost:8000/src/templates/$uid

Pages in gatsby-config changed to:
pages: [{
type: ‘Blog’,
match: ‘./src/templates/:uid’,
path: ‘/blog-preview’,
component: require.resolve(’./src/templates/post.js’) // Template file
}],
Trying to iterate through the pages using in post.js with:
const doc = props.prismic.allBlogs.edges.slice(0,1).pop();

[Pau]

Hey @MolemiEd, are you getting any specific error when running tour project, or what are you seeing when you go to the correct route? Two things can be modified here:

1. The match parameter doesn’t need to be named the same way as the path where the actual template of the query is located. This parameter is what you’re going to get in the URL route for each page. Here are the docs for the plugin configuration.

2. Also, as I mentioned before in this same thread, you need to Add a validation check before returning the queried documents.

[MolemiEd (MolemiEditor)]

Hello. No, I don’t get an error, and the site builds. I can check the
graphql and the pages on localhost.
I do have validation (should have included more in the code snippet).
const doc = data.prismic.allBlogs.edges.slice(0,1).pop()
if (!doc) {

console.log("there are no data in doc")
return null

}

[MolemiEd (MolemiEditor)]

Dear @Paulina
  Correction.  The reason I put this under this thread is that the link to the page shows: 

---

# Gatsby.js development 404 page

There's not a page yet at  `/src/templates/mol`

---

The dynamic pages are not being created.
Thank you.

[Pau]

Ok, you can check a few things here.

1. Run gasby clean and then re run the project
2. Change the validation to be just const doc = data.prismic.allBlogs.edges.edges[0]
3. Check if you are passing the UID variable in the queries to make them dynamic.

Also, take a look at this Troubleshooting: queries article

[MolemiEd (MolemiEditor)]

Thank you very much for the feedback. however, I still do not have dynamic pages. I would appreciate some assistance to pinpoint issue:

1. I ran gatsby clean and restarted gatsby develop. This has not resolved issue
2. The validation to “const doc = data.prismic.allBlogs.edges.edges[0]” with two ‘edges’ is not resolving issue as it results in type error:

---

TypeError: Cannot read property ‘0’ of undefined

Post

src/templates/post.js:169

  166 | // Define the Post content returned from Prismic  
167 | //const doc = data.prismic.allBlogs.edges.slice(0,1).pop();  
168 | //const doc = data.prismic.allBlogs.edges[0]> 
169 | const doc = data.prismic.allBlogs.edges.edges[0]  
170 |    
171 | if(!doc) return null;


2 .  Using const doc = data.prismic.allBlogs.edges[0] seems to find the edge but it is NULL and fails the validation.  

3. The query runs fine on GraphiQL as per this screenshot ![Screenshot 2020-07-05 at 14.11.29|690x224](upload://nmTc0KUedZB4lgRLnpgLMXEstQq.png) 

Also, the allblogs front page with links to the dynamic pages works fine as we manually go through each node and create a small headline.  
The links seem to be created ok and linkResolver works.  

4.  Before we consider having to go back to Gatsby OnCreatePage, can I ask, where does the plugin find the context $uid to pass to the query?  Our post.js is for creating one page at a time, so perhaps the issue is figuring out how to get one page at a time.

[MolemiEd (MolemiEditor)]

I have also gone through the troubleshooting items.
https://prismic.io/docs/gatsby/troubleshooting/issues-with-gatsby-queries

The only one that is possibly still a contributor is " Cannot read property ‘value’ of undefined "