TypeError: Cannot read property 'load' of undefined

[jonybekov]

I'm trying to fetch data dynamically using graphql. In the example https://github.com/birkir/gatsby-source-prismic-graphql#dynamic-queries-and-fetching here prismic.load() method is used to query dynamically. But when I tried to do it like example code I get this error:

However I couldn't find anything about prismic.load() method?

Here's my react component:

import React, { useState, useEffect } from "react"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

export const query = graphql`
  query myQuery($lang: String) {
    prismic {
      allMemberss(lang: $lang) {
        edges {
          node {
            name
            job
            avatar
            _linkType
          }
        }
      }
    }
  }
`

const IndexPage = props => {
  console.log(props)
  const members = props.data.prismic.allMemberss.edges

  const handleClick = () => {
    console.log(props.prismic)
    props.prismic.load({
      variables: { lang: "ru" },
      query,
    })
  }

  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <ul className="members">
        {members.map((el, i) => {
          return (
            <div key={i}>
              <li>{el.node.name[0].text}</li>
            </div>
          )
        })}
      </ul>
      <button onClick={handleClick}>Load</button>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}

export default IndexPage

[birkir]

What other Gatsby plugins do you have? Probably other plugin is overwriting the wrapper component.

[amihalopoulos]

I too am getting this error. The only other plugins I am using (that aren't used in the pagination example repo) are gatsby-plugin-google-analytics, gatsby-plugin-facebook-pixel, and gatsby-plugin-styled-components.

Using "gatsby-source-prismic-graphql": "3.4.0-beta.1",

EDIT: I resolved this by updating "gatsby-source-prismic-graphql" to "3.4.0-beta.2"

[slaterbbx]

Whatever you guys changed in version 3.4.0-beta.2 please keep that change from 3.4.0-beta.1 because I too was able to fix this issue with the above change like @amihalopoulos

I think the issue came from gatsby-plugin-styled-components, I believe it does use the wrapper component. I also have gatsby-plugin-layout, which I believe also uses the wrapper component.

EDIT: update, issue still persists with the 3.4.0-bets.2 when in production.