Question

我正在使用Gatsby / GraphQL / Prismic开发一个项目。当我尝试使用GraphQL从Prismic API获取数据时，会弹出此错误。

但是，当我在GraphiQL浏览器上查询请求时，它是从API获取数据的。但是在Component内部使用它会引发错误。

这是我的partners.js组件

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>
        );
    }
}

这是我的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
            }
        }
    ]
};

我无法从gatsby-source-prismic-graphql的github页面上找到我的问题的解决方案。有人遇到过同样的问题吗？

Answer 1

这里有几件事要注意。

为什么您还没有在gatsby-config中创建任何页面？
在尝试检索查询数据之前添加return null
您发现的错误已过时，请运行 gatsby clean ，然后重试。在错误消息中，您输入的值不正确： allServs 而不是 allPartners 。

TypeError：无法读取未定义的属性“ prismic”

1 个答案: