birkir / gatsby-source-prismic-graphql

Gatsby source plugin for Prismic GraphQL
MIT License
137 stars 75 forks source link

Pagination - TypeError: Cannot read property 'load' of undefined #202

Open alexanderfountain opened 4 years ago

alexanderfountain commented 4 years ago

Running 3.6.2 version

I am attempting to switch my source tool from gatsby-source-prismic to gatsby-source-prismic-graphql. Can't seem to get pagination going on my blog index page.

I set my page up just like the pagination example.

My first error is "React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render."

Commenting out if (!data) { return <div>no data</div> }

Resolves this error.. Or you could add it to the useEffect hook.

The next error I can't resolve is "TypeError: Cannot read property 'load' of undefined" which is coming from this line: props.prismic .load({ variables: { after: getCursorFromDocumentIndex(page) } }) .then(res => setData(res.data)); }, [page]);

If i console log props indeed I do not see prismic.

Side note: I cloned the pagination example. Ran npm install, and ran gatsby develop, could not get this to spin up at all with a promise error.

kb1995 commented 4 years ago

I also tried to implement the pagination example last week, but I got similar errors as well. I gave up and implemented a Load More button instead. I will be interested in a solution as well

veloce commented 4 years ago

Hello! @alexanderfountain maybe you can share your gatsby-config.js to see if we can reproduce your error? Or even better if you can provide an example repo with the minimum setup where you have the error it would be useful to solve the issue. Thanks!

subhashb commented 4 years ago

@veloce I am facing a similar issue. The error is TypeError: Cannot read property 'prismic' of undefined

I built this based on the pagination example but removed the pagination logic to get the basic version working first.

Here is an example implementation (note that the code is in a non-master branch): https://github.com/subhashb/prismic-tutorial/tree/dynamic-loading

Giulico commented 4 years ago

@subhashb I solved this declaring gatsby-plugin-transition-link after gatsby-source-prismic-graphql in gatsby-config.js

More info here

subhashb commented 4 years ago

@Giulico Thank you for that insight! 👍
I stumbled upon it on another thread while fighting a completely different problem, but did not connect the two.