Search code examples
reactjsgraphqlnext.jsgraphiql

I am running a Gatsby Graphql queries successfully with GraphiQL, but on NextJS (GraphQL queries configured with Apollo) the same queries don't work?

  • Just to confirm, both the NextJS and Gatsby are connected to a Strapi api which ARE GraphQL compatible and I have the server running on http://localhost:1337
  • ALSO, I can access the GraphQL playground through http://localhost:1337/graphql

HOWEVER, Gatsby gives me the ability to run GraphQL also through GraphiQL on http://localhost:8000/___graphiql and this is where my discrepancies begin...

  • The GraphiQL on http://localhost:8000/ that Gatsby provides is absolutely awesome. I prefer it to the GraphQL playground which you will see down in the bottom screenshot in dark mode on http://localhost:1337/graphql

Here is the successful GraphQL query on Gatsby which I run through GraphiQL: enter image description here

  • I want the same query within GraphiQL to work within the Strapi backend server on http://localhost:1337/graphql
  • Just to be exact, here is the GraphQL query that ran successfully on GraphiQL:
query MyQuery {
  allStrapiProduct(filter: {featured: {eq: true}}) {
    edges {
      node {
        name
        strapiId
        variants {
          price
          qty
          product
        }
      }
    }
  }
}

Here I am trying to run the GraphQL query through my Strapi backend server via the standard GraphQL playground on http://localhost:1337/graphql so that I can include it within my NextJS project: enter image description here

Please help get this GraphiQL query and all the other GraphiQL queries I ran through Gatsby to work via NextJS!

Solution

  • I believe your two GraphQL servers are serving different schemas. That is, while allStrapiProduct works in GraphiQL, you need to use product in strapi. Likewise, filter in GraphiQL but where in strapi.

    different schemas