CODEWITHSUNDEEP
graphqlgatsbygatsby-image
André Jarboe II
André Jarboe II

Reputation: 838

Using Gatsbyjs and GrapghQL queries don't work in the site. They work in the testing environment

Using Gatsbyjs and GrapghQL queries don't work on the site. They work in the testing environment. 

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;

ERROR: Multiple "root" queries found in file: "cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410" and "cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410". Only the first ("cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410") will be registered.

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

Upvotes: 2

Views: 442

Answers (1)

Artem Biyun
Artem Biyun

Reputation: 31

Looking into this it seems like other users have experienced this problem and have come up with two possible causes and solutions.

It may be related to your CMD. Apparently running Gatsby Build from Windows terminal produces the 'Multiple root queries' error, while running the same command with git bash compiles successfully.

Or Having multiple graphql queries on the same page, in this case separating the queries into their own files and importing them back again fixes the problem.

Upvotes: 3

Related Questions