TypeError: Cannot read property 'prismic' of undefined

Question

I'm working on a Project using Gatsby/GraphQL/Prismic. When I'm trying to get data from Prismic API using GraphQL this error is popping up.

However when I query request on GraphiQL browser it's getting data from API. But when use it inside Component it's throwing error.

Here's my partners.js component

import React, { Component } from 'react';
import { graphql } from 'gatsby';
import Swiper from 'react-id-swiper';

export const query = graphql`
    {
        prismic {
            allPartners {
                edges {
                    node {
                        name
                        description
                        image
                        _linkType
                    }
                }
            }
        }
    }
`;

export default class Partners extends Component {
    state = {
        partners: this.props.data.prismic.allPartners.edges
    };
    render() {
        console.log(this.state.partners);

        const params = {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        };
        if (this.state.partners) {
            return (
                <div>
                    <h1>Partners</h1>
                    <Swiper {...params}>
                        {this.state.partners.map((partner) => {
                            return (
                                <div>
                                    <img src={partner.node.title[0].text} />
                                </div>
                            );
                        })}
                    </Swiper>
                </div>
            );
        }
        return (
            <div>
                <h1>No partners</h1>
            </div>
        );
    }
}

And here's my gatsby-config.js

require('dotenv').config({
    path: `.env`
});

module.exports = {
    siteMetadata: {
        title: `Gatsby Default Starter`,
        description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author: `@gatsbyjs`
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`
            }
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `gatsby-starter-default`,
                short_name: `starter`,
                start_url: `/`,
                background_color: `#663399`,
                theme_color: `#663399`,
                display: `minimal-ui`,
                icon: `src/images/gatsby-icon.png` // This path is relative to the root of the site.
            }
        },
        {
            resolve: `gatsby-source-prismic-graphql`,
            options: {
                repositoryName: process.env.PRISMIC_REPOSITORY_NAME,
                accessToken: process.env.PRISMIC_ACCESS_TOKEN
            }
        }
    ]
};

I couldn't find solution to my question from gatsby-source-prismic-graphql's github page. Does anybody faced the same issue?

Answer 1

There are a few things to note here.

• Why aren't you creating any pages yet in your gatsby-config?
• i think the syntax is not correct cause how is the class going to recieve the props and query. I'm not sure creating a react Class is that necessary
• Add a return null before trying to retrieve the data of the query
• The error you're getting its outdated, run gatsby clean and try again. In the error says that you're calling an incorrect value: allServs instead of allPartners.