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;

错误：在文件“ cUsersAndreDocumentsProgrammingjarboeStudiossrcpagesindexJsx2863101410”和“ cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”中找到多个“根”查询。将仅注册第一个（“ cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”）。

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查询，在这种情况下，将查询分为各自的文件并再次导入回即可解决此问题。

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

1 个答案: