GraphQL UI? #6878

9 Answer(s)

• 

  0

  maliming created 5 years ago

  Support Team

  There is one here: https://docs.aspnetzero.com/documents/common/latest/GraphQL

  Save Cancel
• 

  0

  fguo created 5 years ago

  Do you mean the "Playground"? That is not what I am asking. I like to know "how to send a request to /graphql endpoint from Angular UI."

  Save Cancel
• 

  0

  ismcagdas created 5 years ago

  Support Team

  @fguo

  You can use Angular's http service for that. Or you can use an Angular GraphQL library like this one https://github.com/apollographql/apollo-angular but I don't know how it is used, you can check its documentation.

  I also couldn't be sure if it is free or not, please check carefully.

  Save Cancel
• 

  0

  alper created 5 years ago

  Support Team

  Consuming Your GraphQL API from Angular

  To make HTTP requests you need to inject HttpClient. Then make a GET request to

  http://*domain*/graphql/
  

  Add your query to query parameter of your URL.

  export class FetchDataComponent {
   public reservations: Reservation[];
  
   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
  
      this.fetchDirectlyFromGraphQL = function () {
        var query = `?query=
                      {
                        reservations {
                          checkinDate
                          guest  {
                            name
                          }
                          room {
                            name
                          }
                        }
                      }`  ;
  
        http.get<Reservation[]>(baseUrl + 'graphql/' + query).subscribe(result => {
          this.reservations = result.data.reservations;       
        }, error => console.error(error));
      } 
    }
  }
  

  Consuming Your GraphQL API from JavaScript

  Import the following library

  <script src="https://unpkg.com/[email protected]"></script>
  

  Use Fetch command to send the request:

  fetch('/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify({
        query: 'query reservation {reservations {checkinDate guest  {name} room {name}}}'
      })
    })
    .then(r => r.json())
    .then(response => {
      this.reservations = response.data.reservations;
    });
  

  Using Apollo Client

  There’s a rich client that helps us to fetch data with GraphQL. Apollo Client is the ultra-flexible, community driven GraphQL client for Angular, JavaScript, and native platforms. It is designed from the ground up to make it easy to build UI components that fetch data with GraphQL. It’s open-source but also there’re paid plans.

  See the docs https://www.apollographql.com/docs/angular/

  See the GitHub Repo https://github.com/apollographql/apollo-client

  See how to use it in Angular2 https://gearheart.io/blog/how-to-use-graphql-with-angular-2-with-example/

  Here’s how to query using Apollo Client:

  var client = new Apollo.lib.ApolloClient(
        {
          networkInterface: Apollo.lib.createNetworkInterface({
            uri: "https://localhost:44349/graphql"
          })
        });
  
      const query = Apollo.gql`
  query reservation {
    reservations {
      checkinDate
      guest  {
        name
      }
      room {
        name
      }
    }
  }`;
       
      client.query({
        query: query
      }).then(result => {
        this.reservations = result.data.reservations;
      });
  

  You can access all these code on my sample project on GitHub. https://github.com/ebicoglu/AspNetCoreGraphQL-MyHotel

  Save Cancel
• 

  0

  fguo created 5 years ago

  Thank you for your code example! It is very helpful. After comparing the 5 different implements, I am going to pick the Apollo Client as my solution. Here is one thing I am still unclear:

  Apollo sends the request query to https://<base url>/graphql. How does the server ROUTE this request to "ReservationQuery" to resolve the query? (i.e. Which C# code lines involve this pipeline?)

  Thanks,

  Save Cancel
• 

  0

  alper created 5 years ago

  Support Team

  let's go with this example...

  query myQueryName {
    roles {
      name
  }
  

  In this query you explicitly tell that it's a RoleQuery. the keyword roles is the query name. And it matches this query with RoleQuery because you set this name while you create your query. See https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.GraphQL/Queries/RoleQuery.cs#L29

  this routing is done by GraphQL engine.

  • Writing a new GraphQL Query for AspNet Zero

  Save Cancel
• 

  0

  fguo created 5 years ago

  Thank you! You actually answered my next question.

  I wonder how the Startup pipeling routes the GraphQL request to be handled by GraphQL.Net, instead of MVC controller.

  Let's say I have a controller by chance named "GraphqlController". When a request sent from client to endpoint http://company.com/graphql/, it should be routed to GraphqlController, Index() Action method, as MVC default route map on Startup pipeline. Now, Apollo-Client sends a GraphQL request to same endpoint. Does it conflict with the GraphqlController?

  Save Cancel
• 

  0

  alper created 5 years ago

  Support Team

  ASP.NET middlewares are executed by addition order. If you add the GraphQL middleware before the MVC middleware, then the request will be handled by GraphQL.

  Lastly, this conversation is going beyond the main issue.
  For now you can accept the answer and close this question.

  Save Cancel
• 

  0

  fguo created 5 years ago

  Understand. Thank you!

  Save Cancel