title: facing error of bad request even thought the query is same
body: <p>Well i am trying to reduce the line of code at once refactoring the code</p>
  <pre><code>import React, { Component } from 'react';
  import { Loader } from '../../components';
  import './ProductListing.scss';
  import { ProductCard } from '../../components';
  import { productQuery } from '../../utls/queries';
  
  export class ProductListing extends Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
        products: [],
        categoryId: '',
      };
    }
  
    componentDidMount() {
      const currentUrl = window.location.pathname;
      const id = currentUrl.replace('/', '');
      this.setState({ categoryId: id });
      const newQuer = { ...productQuery };
      const query = `
      query{
        categories {
            name
            products {
              id,
              name,
              brand,
              inStock,
              gallery,
              category,
              prices {
                  amount,
                  currency {
                    label,
                    symbol
                  }
                }
            }
          }
    }
      `;
      console.log(query === productQuery);
      console.log(productQuery);
      fetch('http://localhost:4000', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: JSON.stringify({
          query,
        }),
      })
        .then((response) =&gt; {
          return response.json();
        })
        .then((data) =&gt; {
          this.setState({
            products: data.data,
            loading: false,
          });
        });
    }
  
    render() {
      if (this.state.loading === true) {
        return &lt;Loader /&gt;;
      } else {
        return (
          &lt;div&gt;
            &lt;h2 className='page__listing__title'&gt;
              {this.state.categoryId[0].toUpperCase() +
                this.state.categoryId.substring(1)}
            &lt;/h2&gt;
            &lt;div className='productlisting__page'&gt;
              {this.state.products.categories.map((item, index) =&gt; (
                &lt;div key={index}&gt;
                  {item.name === this.state.categoryId ? (
                    &lt;div className='product__listing__card'&gt;
                      {item.products.map((product, i) =&gt; (
                        &lt;ProductCard product={product} key={i} /&gt;
                      ))}
                    &lt;/div&gt;
                  ) : (
                    ''
                  )}
                &lt;/div&gt;
              ))}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  
  export default ProductListing;
  </code></pre>
  <p>In the process of reducing code i see that the query is taking a lot of places so i decided to write it at separate place now i am importing it as productQuery when i <code>console.log(productQuery===query)</code> it says true but the place where i am using the query to fetch data i use productQuery it just give bad error i cant understand ...
  if some one have much better idea i really like if you can suggest me much better ways by which i can reduce the lines of code</p>
  <p><a href="https://i.stack.imgur.com/9sopm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9sopm.png" alt="enter image description here" /></a></p>