Making runtime GraphQL Requests in Gatsby

Developing with Prismic
1

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

3

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

5

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.

7

Where can I find the proper documentation to the Prismic GraphQL API? All of your documentation seems to reference the Gatsby GraphQL API

8

Here you can find the official docs for GraphQL

We recommend you choose between using GraphQL alone or Gatsby instead. That way queries, and the overall setup is easier

9

Unfortunately this documentation is a bit confusing as it mainly describes the syntax for the build time API. There is a small section that appears to use the Prismic runtime graphQL syntax, but just to explain how similar works, but there exists no documentation on the syntax, structure, or features ('limit' argument not being valid for example) specifically for the Prismic GraphQL runtime API....

10

Yes, it is different because the structure of the schema isn't similar between technologies. For more detailed information about queries in Gatsby, please refer to its official docs: