Today, we'll discuss GraphQL, an alternative to traditional REST APIs that offers a more efficient and flexible way to fetch data from the server. This is especially perfect for front-end developers looking to optimize their applications.

What is GraphQL?

GraphQL is a query language for APIs, developed by Facebook. It's a more efficient and powerful way to fetch data from the server, making it easier to handle complex data requests.

Getting Started with GraphQL

To start, we need a GraphQL server. We'll be using Hasura, but there are several other options out there, mostly open-source.

For this tutorial, I'll be using the server that we built in a previous video. Here's a link for you to go ahead and set up the server so you can run these queries on your computer.

Querying Data with GraphQL

Queries are used to request data from the server. In this example, we'll retrieve the title and description of our exercises.

query getExercisesList {
  exercises {
    title
    description
  }
}

To also get the muscles that the exercise triggers, we can simply add the muscles field and run the query again.

Mutations in GraphQL

Mutations are used for insert, update, or delete operations in GraphQL. Queries are for reading, while mutations are for writing or updating.

Here's an example of a mutation to create a workout:

mutation createWorkout {
  insert_workout_one(
    object: {
      title: "My First Workout"
      description: "This is the description of my first workout"
    }
  ) {
    workout_id
  }
}

Adding Exercises to a Workout

To add exercises to a workout, we can modify the mutation like this:

mutation createWorkoutWithExercises {
  insert_workout_one(
    object: {
      title: "My Second Workout"
      description: "This is the description of my second workout"
      exercises: {
        data: [
          { exercise_id: "exercise-id-1" }
          { exercise_id: "exercise-id-2" }
        ]
      }
    }
  ) {
    workout_id
  }
}

Using Conditions, Offsets, and Limits in Queries

With GraphQL, we can easily limit the amount of data we retrieve and apply conditions to our queries. This is useful for pagination and filtering data.

query getWorkouts($title: String!) {
  workouts(
    limit: 1
    offset: 1
    where: { exercises: { exercise: { title: { _eq: $title } } } }
  ) {
    title
    description
    exercises {
      exercise {
        title
        description
      }
    }
  }
}

Real-time Updates with Subscriptions

GraphQL supports real-time updates through subscriptions. You can subscribe to changes in your data and automatically receive updates when the data changes.

subscription getWorkouts {
  workouts {
    title
    description
    exercises {
      exercise {
        title
        description
      }
    }
  }
}

Using Streams

Another approach for real-time updates is using streams. Streams are more suitable for use cases like building chat applications.

subscription workoutStream($batchSize: Int!, $cursor: timestamptz!) {
  workout_stream(batch_size: $batchSize, cursor: $cursor) {
    title
    description
  }
}