Building with AdonisJS & Inertia #2.1

Sharing Data from AdonisJS to Vue via Inertia

In This Lesson

We'll learn how to pass data from AdonisJS to Vue using Inertia as the broker. We'll discuss passing data from our controllers, from middleware, and globally via the Inertia shared data configuration.

Created by
@tomgobich
Published

⏳ Chapters

00:00 - The Inertia Share Method
01:05 - Sharing within Middleware
02:25 - The Inertia Configuration
03:02 - Globally Shared Data
04:32 - Shared Data Interface Typing
06:19 - The usePage Composable

Join the Discussion 4 comments

Create a free account to join in on the discussion
  1. @thenial

    I believe it should be noted that errors: (ctx) => ctx.session.flashMessages.get('errors') does not contain inputErrorsBag or errorsBag. So if you're using session authentication and run into an E_INVALID_CREDENTIALS exception, the errors in sharedData will not have that.

    Also, I believe the useForm() hook from inertia uses the errors from sharedData, and if you're using that then it too will not get the inputErrorsBag or errorsBag.

    1
    1. Responding to thenial
      @tomgobich

      Hi Thenial! That is correct, errorsBag won't be included when you specifically get errors. I opted to save this discussion for a later lesson, but the way I like to think of it is:

      • errors holds your validation errors

      • errorsBag holds your exceptions

      The useForm helper is really only going to be concerned with validation errors, as it works best when they have a field key, and exceptions tend to be more generic and not specific to any one field. Later in this series, we'll watch for the E_INVALID_CREDENTIALS exception using an alert component. We'll also set up a ToastManager to automatically display a toast notification anytime an exception is reached. When we have validation errors, we'll also get an errorsBag entry with a summary of those validation errors, so a nice bonus of this approach is we'll also get a little toast when we have validation errors saying something like: "The form could not be saved. Please check the errors below."

      Additionally, the inputErrorsBag is, at this point, going to mostly be the same as errors. See:
      https://github.com/adonisjs/session/blob/develop/src/session.ts#L360-L370

      0
      1. Responding to tomgobich
        @thenial

        Thanks for the response! the differentiation you pointed out for errors and errorsBags helped me clarify my understanding of them and I look forward to the lectures that cover this topic!

        2
        1. Responding to thenial
          @tomgobich

          Anytime!! Awesome, I'm happy to hear that! 😊 Should be discussed in the following two lessons:

          4.8 - Setting Up A ToastManager
          5.3 - Logging In Users & Displaying Exceptions

          *lesson numbers subject to change slightly

          0