9 Using GraphQL APIs without a client library

 

This chapter covers

  • Analyzing UI components to determine their GraphQL data requirements
  • Performing Ajax POST requests for GraphQL operations
  • Using tokens in request headers to identify the API consumer
  • Using fragments to make every UI component responsible for its own data requirements
  • Using GraphQL features to simplify and generalize the UI code

In the last chapter, we finished the implementation of the AZdev GraphQL API service. It’s now time to explore how to use that API practically in a frontend web application.

When it comes to using GraphQL in web applications, you can use it either directly with a simple Ajax library (like axios or fetch) or with a fully featured GraphQL client (like Relay or Apollo) to manage all GraphQL communications. We’ll explore using a GraphQL API with client libraries in the next chapter. In this chapter, we will start by exploring how to use the AZdev GraphQL API without a client library. However, to make this example as close as possible to a real-life project, we’re going to use a UI library to manage what happens in the browser.

Tip

Remember to check out az.dev/gia-updates to see any API updates you might need for this chapter.

9.1 Using a web UI library

9.2 Running the web server

9.3 Making Ajax requests

9.4 Performing GraphQL query requests

9.4.1 Using GraphQL fragments in UI components

9.4.2 Including variables in requests

9.5 Performing GraphQL mutation requests

9.5.1 The login/signup forms

9.5.2 Handling generic server errors

9.5.3 Authenticating GraphQL requests

9.5.4 The Create Task form

9.5.5 The Create Approach form

9.5.6 Voting on an Approach

9.6 Performing query requests scoped for a user

The Search form

9.7  Next up

Summary