title: What is type "StringQueryOperatorInput"? How can I get rid of this annoying graphql error?
body: <p>I am attempting to create Gatsby pages programmatically using the Gatsby API createPages and data from Firebase. I've set up everything successfully up to the point where Firebase data is accessible via GraphQL and now I want to query specifict data for each of the new pages that were created using id (which are in string format). However, when I create the template component and try to query the data i get this error: </p>
  
  <pre><code>Variable "$clientId" of type "String!" used in position expecting type "StringQueryOperatorInput".
  </code></pre>
  
  <p>I have looked everywhere for a reference of this <strong>StringQueryOperatorInput</strong> and can't find any info on it. Google and graphql docs don't seem to mention the term and this is my first time seeing it. After troubleshooting for an hour I got a different error: </p>
  
  <pre><code>If you're e.g. filtering for specific nodes make sure that you choose the correct field (that has the same type "String!") or adjust the context variable to the type "StringQueryOperatorInput".
  File: src/templates/Homeowner/Homeowner.js:24:9
  </code></pre>
  
  <p>However, I still don't know what a StringQueryOperatorInput is or how to fix this. 
  Below is my code for this component and my gatsby-node.js, and my gatsby-config.js where i use a plugin to source the Firebase data. 
  I could really use some help on this, I can't seem to find any reference of this StringQueryOperatorInput. 
  Everything else works fine, I just can't get this query on the Homeowner.js template to work. </p>
  
  <p><strong>gatsby-node.js</strong></p>
  
  <pre><code>exports.createPages = async ({ graphql, actions }) =&gt; {
    const { createPage } = actions;
    const result = await graphql(`
      query {
        allClients {
          nodes {
            firstName
            lastName
            id
          }
        }
      }
    `);
    console.log(JSON.stringify(result, null, 4));
    result.data.allClients.nodes.forEach(node =&gt; {
      const slug = `/client/${node.id}`;
      createPage({
        path: slug,
        component: require.resolve(`./src/templates/Homeowner/Homeowner.js`),
        context: { clientId: node.id },
      });
    });
  };
  </code></pre>
  
  <p><strong>src/templates/Homeowner/Homeowner.js</strong></p>
  
  <pre><code>import React from 'react';
  import { graphql } from 'gatsby';
  import { withFirebase } from '../../components/Firebase';
  import { withStyles } from '@material-ui/core/styles';
  import Layout from '../../components/layout';
  
  const Homeowner = ({ data }) =&gt; {
    console.log(data.clients, 'data');
    return (
      &lt;&gt;
        &lt;Layout&gt;
          &lt;h1&gt;Home Owner Component&lt;/h1&gt;
          {/* &lt;h3&gt;{client.firstName}&lt;/h3&gt;
          &lt;h3&gt;{client.lastName}&lt;/h3&gt;
          &lt;h3&gt;{client.email}&lt;/h3&gt; */}
        &lt;/Layout&gt;
      &lt;/&gt;
    );
  };
  
  export default Homeowner;
  
  export const query = graphql`
    query($clientId: String!) {
      clients(id: $clientId) {
        firstName
        lastName
        email
      }
    }
  `;
  </code></pre>
  
  <p><strong>gatsby-config.js</strong></p>
  
  <pre><code>require('dotenv').config({
    path: `.env.${process.env.NODE_ENV}`,
  });
  module.exports = {
    siteMetadata: {
      title: `SiteTitle`,
      siteUrl: `https://www.mysitwe.com`,
      description: `YourSite`,
    },
    plugins: [
      `gatsby-plugin-react-helmet`,
      `gatsby-plugin-sitemap`,
      `gatsby-plugin-styled-components`,
      `gatsby-plugin-sharp`,
      `gatsby-transformer-sharp`,
      {
        resolve: `gatsby-source-firebase`,
        options: {
          credential: require('./firebase-key.json'),
          databaseURL: 'https://firebaseurl/',
          types: [
            {
              type: 'Clients',
              path: 'clients',
            },
            {
              type: 'Users',
              path: 'users',
            },
          ],
        },
      },
      {
        resolve: `gatsby-plugin-prefetch-google-fonts`,
        options: {
          fonts: [
            {
              family: `Nunito Sans`,
              variants: [`400`, `600`, `800`],
            },
            {
              family: `Montserrat`,
              variants: [`300`, `400`, `400i`, `500`, `600`],
            },
            {
              family: `Spectral`,
              variants: [`400`, `600`, `800`],
            },
            {
              family: `Karla`,
              variants: [`400`, `700`],
            },
          ],
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images`,
        },
      },
      `gatsby-plugin-offline`,
    ],
  };
  </code></pre>
  
  <p>THank you in advance if anyone can help me out. </p>