Refreshing gets new data but doesn't re-render the page's content

[ncphillips]

Version:

Javascript

 "node_modules/@inertiajs/core": {
      "version": "2.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-2.0.0-beta.2.tgz",
      "integrity": "sha512-2fi1YAncmkQAGko+miQanobF5anSO9lBK8i6Fgl0YKDjLQJg7+Sdr/yQIDwJtvFYgOgDbAhIcAawn9usc0/9bQ==",

    "node_modules/@inertiajs/vue3": {
      "version": "2.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-2.0.0-beta.2.tgz",
      "integrity": "sha512-tnZN+3eB4sMdgVqERy0jjd2JHJgG8SXrCg9Em5ecJ7X8+HaMSHtSjhrkAduzE+TZPX+WvYuntrwYYtP3AjB2Rg==",

PHP

      {
            "name": "inertiajs/inertia-laravel",
            "version": "2.x-dev",
            "source": {
                "type": "git",
                "url": "https://github.com/inertiajs/inertia-laravel.git",
                "reference": "a836013b5b86b999189b4eb2ce60835cd1329136"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/inertiajs/inertia-laravel/zipball/a836013b5b86b999189b4eb2ce60835cd1329136",
                "reference": "a836013b5b86b999189b4eb2ce60835cd1329136",
                "shasum": ""
            },

Describe the problem:

If I make changes to what my controller sends to the frontend, and then refresh my browser, then the contents of the page are not updated.

Here's a loom where I show the behaviour

https://www.loom.com/share/7900a5e9d4514d75bd1f6152d073e628

I did some more investigation after recording this video.

The <Inertia> component has the right data in it's initialPage object.

Note that the sent_by and team objects are present on the invitation.

But the AppLayout doesn't have the right content

And neither does the page itself

Steps to reproduce:

UserInvitationController

<?php

namespace App\Http\Controllers;

use App\Models\Invitation;
use App\Models\Team;
use App\Rules\NewInvitationValidationRule;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;

class UserInvitationController extends Controller
{
    public function index()
    {
        $invitations = Invitation::paginate();

        return inertia('UserInvitation/Index', [
            'invitations' => $invitations,
        ]);
    }
}

Pages/UserInvitation/Index.vue

<template>
  <x-header heading="Invitations" />
  <x-section>
    <h2 class="heading secondary">Invitations</h2>
    <ul v-if="invitations.data.length">
      <li v-for="membership in invitations.data">
        <strong>{{ membership.team?.name }}:</strong>
        Invited
        <span v-if="membership.sent_by">by {{ membership.sent_by.name }}</span>
        <span>{{ " " }}on {{ monthDayYear(membership.created_at) }}</span>
      </li>
    </ul>
    <p v-else>No invitations found.</p>
  </x-section>
</template>
<script setup lang="ts">
import XSection from "@/ds/x-section.vue";
import { LaravelPaginator } from "@/types/laravel-paginator";
import XHeader from "@/ds/x-header.vue";
import { monthDayYear } from "@/format/dates";
import Invitation = App.Models.Invitation;
import Team = App.Models.Team;
import User = App.Models.User;

defineProps<{
  invitations: LaravelPaginator<Invitation & { team: Team; sent_by: User }>;
}>();
</script>

app.ts

import "../css/app.css";
import "./bootstrap";

import { createApp, DefineComponent, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { ZiggyVue } from "ziggy-js";
import AppLayout from "@/Layouts/AppLayout.vue";
import { createI18n } from "vue-i18n";
import en from "@/lang/en";

createInertiaApp({
  title: (title) => (title ? `${title} | BjjRolls` : "BjjRolls"),
  resolve(name) {
    const pages: Record<string, DefineComponent> = import.meta.glob(
      "./Pages/**/*.vue",
      { eager: true },
    );

    let page = pages[`./Pages/${name}.vue`];
    page.default.layout = page.default.layout || AppLayout;
    return page;
  },
  setup({ el, App, props, plugin }) {
    let i18n = createI18n({
      messages: {
        en,
      },
    });

    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .use(i18n)
      .mount(el);
  },
}).then(() => {
  //
});

[joetannenbaum]

This is interesting... I'm having trouble reproducing. Are you using encrypted history? If so, does it happen when you're not encrypting the history?

[ncphillips]

Hey, thanks. I haven't checked for some time. I can try again sometime this week and get back to you.