graphql - 使用 Gatsby Js 和 GraphQL 查询在该站点中不起作用。他们在测试环境中工作

Question

在该网站上无法使用 Gatsbyjs 和 GrapghQL 查询。他们在测试环境中工作。

import React from "react";
import { Link, graphql, useStaticQuery } from "gatsby";
import Img from "gatsby-image";
import PropTypes from "prop-types";

// Components
import Layout from "../components/layout";

// CSS
import "../css/index.css";

// Page
const Index = () => {

  return (
    <Layout>
      {/* Hero  */}
      <section id="hero">
        <div className="hero-title container">
          <h1>Web design and development</h1>
          <h2>Costume Solutions for companies and individuals</h2>
        </div>
      </section>

      {/* Services */}
      <section id="services">
        <div className="title">
          <h2>Our Services</h2>
          <h3>We Provide You Quality</h3>
        </div>
        <div className="services container">
          <div className="service web-design">
            <h2>Web Design</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
          <div className="service social-media">
            <h2>Social Media</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
          <div className="service video-production">
            <h2>Video Production</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
      </section>

      {/* portfolio */}
      <section id="Portfolio">
        <div className="title">
          <h2>Portfolio</h2>
          <h3>Some Of Our Awesome Projects</h3>
        </div>
        <div className="portfolio container"></div>
      </section>
    </Layout>
  );
};

// Index.propTypes = {
//   data: PropTypes.object.isrequired,
// };

export const query = graphql`
  {
    protfolioImages: allFile(
      filter: { relativeDirectory: { eq: "portfolio" } }
    ) {
      nodes {
        id
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`;

export default Index;

错误: 在文件中找到多个“根”查询:“cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”和“cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”。 仅第一个(“cUsersAndreDocumentsProgramingjarboeStudiosssrcpagesindexJsx2863101410”)将被注册。

Instead of:
1 | query cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410 {
2 |   bar {
3 |     #...
4 |   }
5 | }
6 | 
7 | query cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410 {
8 |   foo {
9 |     #...
10 |   }
11 | }

Do:
1 | query cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410AndCUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410 {
2 |   bar {
3 |     #...
4 |   }
5 |   foo {
6 |     #...
7 |   }
8 | }

Answer 1

经过调查，其他用户似乎也遇到过这个问题，并提出了两种可能的原因和解决方案。

可能与你的CMD有关。显然，从 Windows 终端运行 Gatsby Build 会产生“多个根查询”错误，而使用 git bash 运行相同的命令会成功编译。

或者在同一页面上有多个 graphql 查询，在这种情况下，将查询分离到它们自己的文件中并再次导入它们可以解决问题。