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

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

Open alexanderfountain opened this issue 5 years ago • 5 comments

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.

alexanderfountain avatar May 05 '20 21:05 alexanderfountain

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

kb1995 avatar May 06 '20 13:05 kb1995

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!

veloce avatar May 25 '20 15:05 veloce

@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

subhashb avatar Jun 02 '20 23:06 subhashb

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

More info here

Giulico avatar Jun 15 '20 14:06 Giulico

@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.

subhashb avatar Jun 15 '20 16:06 subhashb