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 ponent and try to query the data i get this error:

Variable "$clientId" of type "String!" used in position expecting type "StringQueryOperatorInput".

I have looked everywhere for a reference of this StringQueryOperatorInput 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:

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

However, I still don't know what a StringQueryOperatorInput is or how to fix this. Below is my code for this ponent 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.

gatsby-node.js

exports.createPages = async ({ graphql, actions }) => {
  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 => {
    const slug = `/client/${node.id}`;
    createPage({
      path: slug,
      ponent: require.resolve(`./src/templates/Homeowner/Homeowner.js`),
      context: { clientId: node.id },
    });
  });
};

src/templates/Homeowner/Homeowner.js

import React from 'react';
import { graphql } from 'gatsby';
import { withFirebase } from '../../ponents/Firebase';
import { withStyles } from '@material-ui/core/styles';
import Layout from '../../ponents/layout';

const Homeowner = ({ data }) => {
  console.log(data.clients, 'data');
  return (
    <>
      <Layout>
        <h1>Home Owner Component</h1>
        {/* <h3>{client.firstName}</h3>
        <h3>{client.lastName}</h3>
        <h3>{client.email}</h3> */}
      </Layout>
    </>
  );
};

export default Homeowner;

export const query = graphql`
  query($clientId: String!) {
    clients(id: $clientId) {
      firstName
      lastName
      email
    }
  }
`;

gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
  siteMetadata: {
    title: `SiteTitle`,
    siteUrl: ``,
    description: `YourSite`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-styled-ponents`,
    `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`,
  ],
};

THank you in advance if anyone can help me out.

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 ponent and try to query the data i get this error:

Variable "$clientId" of type "String!" used in position expecting type "StringQueryOperatorInput".

I have looked everywhere for a reference of this StringQueryOperatorInput 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:

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

However, I still don't know what a StringQueryOperatorInput is or how to fix this. Below is my code for this ponent 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.

gatsby-node.js

exports.createPages = async ({ graphql, actions }) => {
  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 => {
    const slug = `/client/${node.id}`;
    createPage({
      path: slug,
      ponent: require.resolve(`./src/templates/Homeowner/Homeowner.js`),
      context: { clientId: node.id },
    });
  });
};

src/templates/Homeowner/Homeowner.js

import React from 'react';
import { graphql } from 'gatsby';
import { withFirebase } from '../../ponents/Firebase';
import { withStyles } from '@material-ui/core/styles';
import Layout from '../../ponents/layout';

const Homeowner = ({ data }) => {
  console.log(data.clients, 'data');
  return (
    <>
      <Layout>
        <h1>Home Owner Component</h1>
        {/* <h3>{client.firstName}</h3>
        <h3>{client.lastName}</h3>
        <h3>{client.email}</h3> */}
      </Layout>
    </>
  );
};

export default Homeowner;

export const query = graphql`
  query($clientId: String!) {
    clients(id: $clientId) {
      firstName
      lastName
      email
    }
  }
`;

gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
  siteMetadata: {
    title: `SiteTitle`,
    siteUrl: `https://www.mysitwe.`,
    description: `YourSite`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-styled-ponents`,
    `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`,
  ],
};

THank you in advance if anyone can help me out.

• javascript
• node.js
• graphql
• gatsby

2 Answers 2

Actually literally right after I posted this question I found the solution. I needed to set up my query like so:

export const query = graphql`
  query($clientId: String!) {
    clients(id: { eq: $clientId }) {
      firstName
      lastName
      email
    }
  }
`;

I assume that leaving out the {eq: $clientId} throws that StringQuery error on the GraphQL side. I still do not know what a StringQueryOperatorInput is, however, I have successfully generated the pages with the data from firebase.

StringQueryOperatorInput is the type of the id argument of the clients field. GraphQL includes scalar types like String, ID or Int as well as types that describe more plex data structures like arrays or objects. In this case, StringQueryOperatorInput is an input object type -- it describes objects that can be used as inputs like argument values or variables.

When filtering fields, Gatsby uses an input object like this to enable using a variety of parison operators to filter the exposed data -- in addition to eq (equals), you can use other operators like ne, regex, in, gt, etc. You can see the full list here. Because not all inputs apply to all scalars (regex makes sense for a String field but lte does not), there's a different input type for each scalar (IntQueryOperatorInput, BooleanQueryOperatorInput, etc.)

Gatsby exposes a GraphiQL endpoint in development. Writing queries using GraphiQL allows you to utilize autoplete and syntax highlighting so that you can avoid unexpected syntax errors like this. You can also use the "Docs" button to search and browse the entire schema.