Making runtime GraphQL Requests in Gatsby

How can I make normal GraphQL queries during runtime without losing functionality?

So far, I've set up an ApolloClient like so:

// @ts-ignore
import { createPrismicLink } from 'apollo-link-prismic'
import { ApolloClient, InMemoryCache } from '@apollo/client'
import fetch from 'node-fetch'

const prismicClient = new ApolloClient({
  link: createPrismicLink({
    repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME ?? '',
    accessToken: process.env.GATSBY_PRISMIC_API_KEY ?? '',
    fetch,
  }),
  cache: new InMemoryCache(),
})

export default prismicClient

I am using this client in a component that I'd like to load some data for during runtime. I am using it like so:

import prismicClient from '../api/clients/prismicClient'
import gql from 'graphql-tag'

const MyComponent = () => {
  ...
  prismicClient
    .query({
      query: gql`
        query {
           ...
          }
        }
      `,
    })
    .then(res => {
      setRes(res.data)
    })
    .catch(err => {
      setRes(err)
    })
}

Which seems to work, however the GraphQL syntax is drastically different from that of what I would use in a StaticQuery. For example, if I want to query AllPrismicMyCustomDocument like I would in a static query, instead I have to do allMy_Custom_Document. Which really throws off the codebase because we are working with two different graphql schemas for the same graphql resource (i.e. this is a nightmare).

Secondly, I am unable to add filters and limits and such. If my query is like:

gql`
  query {
    allMy_Custom_Document(limit: 5) {
      ....
    }
  }
`

I just get thrown an unknown argument 'limit on field allMy_Custom_Document.

The last difference I've noticed is that Integration Field Data is not represented the same either.... Instead of being able to pick which data to get from an Integration Field, it just comes back as a json, whereas when making a static query I get to select them. I bring this up because I have an Integration Field that has a date field in it that I would like to filter by.

I dont know, I've spent days trying to figure this out and can't find anyway to make a GraphQL query during runtime in the same syntax I would use to make the same query during build time

Hello @tannerjuby1, I'm not sure if this is possible. I'll ask the team and let you know what they think.

The DevExp team shares the following information:

You're seeing a different schema because runtime GraphQL requests directly to Prismic’s GraphQL API using Apollo Client aren't the same API as Gatsby’s GraphQL API.

<StaticQuery> queries Gatsby’s API at build time, instead of at runtime. The Gatsby GraphQL API does not exist at runtime, so if runtime querying is absolutely necessary, then you'll need to send the queries to the Prismic API.