0

I'm using Rails as GraphQL backend using plugin graphql-ruby. On front end size, I'm using Apollo Client for my react/redux project.

Here is my front end side:

const networkInterface = createNetworkInterface({
  uri: 'http://localhost:4001/graphql',
});
export const apolloClient = new ApolloClient({ networkInterface });

On my backend, I have tested successfully following query on http://localhost:4001/graphiql.

query{
  allAuthors{
    full_name,
    books{
      book_name,
      book_description,
      isbn
    }
  }
}

Here is my rails route config:

if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/graphql"
  end

  post "/graphql", to: "graphql#execute"

I try to get similar data from front end side. Here is my code:

    const ALL_AUTHORS_QUERY = gql`
      query allAuthors {
        full_name,
        books{
          book_name,
          book_description,
          isbn
        }
      }
    `;
    apolloClient
      .query({
        query: ALL_AUTHORS_QUERY,
      })
      .then(response => console.log(response.data));
  }

But after that, I meet following exception:

POST http://localhost:4001/graphql 422 (Unprocessable Entity)

Please tell me what have I wrong ? Thanks

@Edit 1: I also try different query on client but the problem still same.

   const ALL_AUTHORS_QUERY = gql`
  query {
    allAuthors {
      full_name
      books {
        book_name
        book_description
        isbn
      }
    }
  }
`;
apolloClient
  .query({
    query: ALL_AUTHORS_QUERY,
  })
  .then(response => console.log(response.data));
Trần Kim Dự
  • 5,872
  • 12
  • 55
  • 107

1 Answers1

0

On the client side, you have named your query allAuthors when allAuthors is a GraphQL type. You don't have to name your query that's optional. However, allAuthors is a required type of the query root.

query allAuthors { your query starts with this, when it should be like this query { allAuthors

Scriptonomy
  • 3,975
  • 1
  • 15
  • 23