React <StaticQuery>никогда не загружается - PullRequest
Новая
       71

React <StaticQuery>никогда не загружается

2 голосов
/ 10 июля 2020

Стек: React / Gatsby + Prismi c интеграция + хостинг Netlify

Проблема:

  • Я клонировал https://github.com/margueriteroth/gatsby-prismic-starter-prist
  • Мое репо можно найти по адресу: https://github.com/kylemhudson/kyle-m-hudson-prist
  • Были проблемы с gatsby-source-graphql-universal и gatsby-source-prismic-graphql, но я смог решить эти проблемы и запустить сайт.
  • Однако теперь проблема в том, что всякий раз, когда сайт загружается во время локальной разработки, браузер отображает только это:

Браузер Localhost при запуске разработки

Что я пробовал

  • Я нашел сообщение на Github, где кто-то решил эту проблему, удалив и вернувшись к следующий код: 
    <LayoutContainer className="div">
                <Global styles={[globalStyles, typeStyles]} />
                <div className="Layout">
                    <Header />
                    <main className="Layout__content">
                        {children}
                    </main>
                    <Footer />
                </div>
            </LayoutContainer>
)
    
export const query = graphql`
        query SiteTitleQuery {
            site {
                siteMetadata {
                    title
                }
            }
        }
    `
  • Это работает. Однако, если вы попытаетесь собрать или развернуть Netlify, вы получите следующие сообщения: 
3:52:38 PM: error "gatsby-source-prismic-graphql" threw an error while running the sourceNodes lifecycle:
3:52:38 PM: Cannot use GraphQLDirective "@include" from another module or realm.
3:52:38 PM: Ensure that there is only one instance of "graphql" in the node_modules
3:52:38 PM: directory. If different versions of "graphql" are the dependencies of other
3:52:38 PM: relied on modules, use "resolutions" to ensure only one version is installed.
3:52:38 PM: https://yarnpkg.com/en/docs/selective-version-resolutions
3:52:38 PM: Duplicate "graphql" modules cannot be used at the same time since different
3:52:38 PM: versions may have different capabilities and behavior. The data from one
3:52:38 PM: version used in the function from another could produce confusing and
3:52:38 PM: spurious results.
3:52:38 PM:   74 |     if (!sdl) {
3:52:38 PM:   75 |       introspectionSchema = await introspectSchema(link);
3:52:38 PM: > 76 |       sdl = printSchema(introspectionSchema);
3:52:38 PM:      |             ^
3:52:38 PM:   77 |     } else {
3:52:38 PM:   78 |       introspectionSchema = buildSchema(sdl);
3:52:38 PM:   79 |     }
3:52:38 PM: 
3:52:38 PM: 
3:52:38 PM:   Error: Cannot use GraphQLDirective "@include" from another module or realm.
3:52:38 PM:   Ensure that there is only one instance of "graphql" in the node_modules
3:52:38 PM:   directory. If different versions of "graphql" are the dependencies of other
3:52:38 PM:   relied on modules, use "resolutions" to ensure only one version is installed.
3:52:38 PM:   https://yarnpkg.com/en/docs/selective-version-resolutions
3:52:38 PM:   Duplicate "graphql" modules cannot be used at the same time since different
3:52:38 PM:   versions may have different capabilities and behavior. The data from one
3:52:38 PM:   version used in the function from another could produce confusing and
3:52:38 PM:   spurious results.
3:52:38 PM:   
3:52:38 PM:   - Array.filter
3:52:38 PM:   
3:52:38 PM:   - gatsby-node.js:76 exports.sourceNodes
3:52:38 PM:     [repo]/[gatsby-source-prismic-graphql]/[gatsby-source-graphql-universal]/[ga    tsby-source-graphql]/gatsby-node.js:76:13
3:52:38 PM:   
3:52:38 PM:   - task_queues.js:97 processTicksAndRejections
3:52:38 PM:     internal/process/task_queues.js:97:5
3:52:38 PM:   
3:52:38 PM:   - api-runner-node.js:299 async runAPI
3:52:38 PM:     [repo]/[gatsby]/dist/utils/api-runner-node.js:299:16
3:52:38 PM:   
3:52:38 PM: 
3:52:38 PM: not finished source and transform nodes - 0.526s
3:52:38 PM: ​
3:52:38 PM: ┌─────────────────────────────┐
3:52:38 PM: │   "build.command" failed    │
3:52:38 PM: └─────────────────────────────┘

Код:

  • Текущее состояние моего /components/Layout.jsx следующее 
import React from "react";
import PropTypes from "prop-types";
import { graphql } from "gatsby";
import styled from "@emotion/styled";
import { Global } from "@emotion/core";
import globalStyles from 'styles/global';
import typeStyles from 'styles/typography';
import dimensions from "styles/dimensions";
import Footer from "components/Footer";
import Header from "components/Header";
import 'styles/fonts.scss';

const LayoutContainer = styled.div`
    max-width: ${dimensions.maxwidthDesktop}px;
    padding-left: ${dimensions.paddingHorizontalDesktop}em;
    padding-right: ${dimensions.paddingHorizontalDesktop}em;
    margin: 0 auto;

    @media(max-width: ${dimensions.maxwidthTablet}px) {
        padding-left: ${dimensions.paddingHorizontalTablet}em;
        padding-right: ${dimensions.paddingHorizontalTablet}em;
    }

    @media(max-width: ${dimensions.maxwidthMobile}px) {
        padding-left: ${dimensions.paddingHorizontalMobile}em;
        padding-right: ${dimensions.paddingHorizontalMobile}em;
    }

    .Layout__content {
        padding-bottom: 5em;
    }
`;

const Layout = ({ children }) => (
    <LayoutContainer className="div">
                <Global styles={[globalStyles, typeStyles]} />
                <div className="Layout">
                    <Header />
                    <main className="Layout__content">
                        {children}
                    </main>
                    <Footer />
                </div>
            </LayoutContainer>
)
    
export const query = graphql`
        query SiteTitleQuery {
            site {
                siteMetadata {
                    title
                }
            }
        }
    `
Layout.propTypes = {
    children: PropTypes.node.isRequired,
}

export default Layout;

Большое спасибо за вашу помощь

1 Ответ

0 голосов
/ 16 июля 2020

Я столкнулся с аналогичной проблемой при развертывании стартера Prist Gatsby. У меня он заработал после замены пакета gatsby-source-prismic-graphql на вилку Prismi c:

npm install --save @prismicio/gatsby-source-prismic-graphql

или

yarn add @prismicio/gatsby-source-prismic-graphql

... и обновление ссылки в gatsby-config.js согласно инструкциям Фила здесь: https://community.prismic.io/t/error-with-module-gatsby-source-prismic-graphql/779/12

...