Ytukyg

I'm building a Rails API using the gem 'graphql' and want to access this GraphQL API using a Gatsby.js front-end. I've attempted to use gatsby-source-apiserver plugin and gatsby-source-graphql, but neither of them seem to work. (The API works fine when I do queries using the GraphiQL app on my local machine.)

Is there a better Gatsby.js source plugin what will work well with a Rails API using the gem 'graphql', which provides a single endpoint, http://localhost:3000/graphql? And if so, how should I configure that plugin in gatsby-config.js, etc? (BTW, I'm using a Postgres database which I intend to deploy to Heroku -- I'd thought about pursuing hasura, but I'm not sure if that's the best option.)

In the Rails API in routes.rb, I've set up post "/graphql", to: "graphql#execute" to route to GraphqlController. Here is the execute method in the Controller...

def execute

  variables = ensure_hash(params[:variables])

  query = params[:query]

  operation_name = params[:operationName]

  context = {

    # Query context goes here, for example:

    # current_user: current_user,

  }

  result = GraphqlRailsSchema.execute(query, variables: variables, context: context, operation_name: operation_name)

  render json: result

  rescue => e

  raise e unless Rails.env.development?

  handle_error_in_development e

end

When I attempt to render the json: result, result is: #<GraphQL::Query::Result @query=... @to_h={"errors"=>[{"message"=>"No query string was present"}]}> for either of the front-end set-ups I cite below....

In my Gatsby.js front-end, when I use gatsby-source-apiserver, in gatsby-config.js, I have...

{

  resolve: 'gatsby-source-apiserver',

  options: {

    typePrefix: 'internal__',

    url: `http://localhost:3000/graphql`,

    method: 'post',

    headers: {

      'Content-Type': 'application/json'

    },

    data: {



    },

    name: `posts`,

    entityLevel: `data.posts`,

    payloadKey: `body`,

  }

},

...and I get his error in my console when I run gatsby develop...

TypeError: Cannot read property 'data' of undefined

And, when I use gatsby-source-graphql, I have this in gatsby-config.js...

{

  resolve: "gatsby-source-graphql",

  options: {

    // This type will contain remote schema Query type

    typeName: "Authors",

    // This is field under which it's accessible

    fieldName: "authors",

    // Url to query from

    url: "http://localhost:3000/graphql",

  },

},

...and I get his error in my console when I run gatsby develop...

Error: Cannot find module 'gatsby/graphql'

As you can see, I'm confused about how to connect the schemas between the front-end and the back-end here. Any help on this would be much appreciated!