Bug/form data caching (#3974)

* Fixing the bug (turns out it was much easier than I first thought!) and adding a Cypress test that reliably reproduces it.

* New text in app heading

* Adding a failsafe to make sure sharedperson data model is not used in components

---------

Co-authored-by: Ole Martin Handeland <git@olemartin.org>

Author: olemartinorg

src/features/formData/useFormDataQuery.tsx

@@ -16,23 +16,18 @@ export function useFormDataQueryDef(url: string | undefined): QueryDefinition<un
   const { fetchFormData } = useAppQueries();
   const queryKey = useFormDataQueryKey(url);
   const options = useFormDataQueryOptions();
-  const isStateless = useApplicationMetadata().isStatelessApp;
-
   const queryFn = url ? () => fetchFormData(url, options) : skipToken;
 
-  if (isStateless) {
-    //  We need to refetch for stateless apps as caching will break some apps.
-    // See this issue: https://github.com/Altinn/app-frontend-react/issues/2564
-    return {
-      queryKey,
-      queryFn,
-      gcTime: 0,
-    };
-  }
-
   return {
     queryKey,
     queryFn,
+
+    // We always have to refetch as caching will break some apps.
+    // See this issue: https://github.com/Altinn/app-frontend-react/issues/2564
+    // This is also important for https://github.com/Altinn/app-frontend-react/issues/3634, and without 'gcTime: 0'
+    // old query cache will be used to initialize FormDataWrite even after invalidateFormDataQueries() has been called.
+    gcTime: 0,
+
     refetchInterval: false,
   };
 }

test/e2e/integration/multiple-datamodels-test/fetching.ts

@@ -0,0 +1,72 @@
+import { AppFrontend } from 'test/e2e/pageobjects/app-frontend';
+
+import type { IRawDataModelBinding } from 'src/layout/common.generated';
+
+const appFrontend = new AppFrontend();
+
+describe('fetching new data from models', () => {
+  /**
+   * Reproduction and regression test for https://github.com/Altinn/app-frontend-react/issues/3634
+   *
+   * This bug relies on the following structure:
+   *  - A data model is created in Task_1, but there is no data in it
+   *  - A text resource (not a component!) references this data model, so it will be fetched in FormDataReaders in Task_1
+   *  - A backend IProcessTaskEnd handler updates the data model when ending Task_1
+   *  - When Task_2 starts, frontend doesn't notice that the data model it had in query cache was outdated, so it
+   *    fails to load it (again), thus getting stuck with the outdated data as initial data in FormDataWrite.
+   */
+  it('should have fetched new data when entering Task_2', () => {
+    cy.startAppInstance(appFrontend.apps.multipleDatamodelsTest);
+    cy.findByRole('textbox', { name: /tekstfelt 1/i }).type('første');
+    cy.findByRole('textbox', { name: /tekstfelt 2/i }).type('andre');
+
+    cy.gotoNavPage('Side3');
+
+    cy.findByRole('button', { name: /legg til ny/i }).click();
+    cy.findByRole('textbox', { name: /fornavn/i }).type('Per');
+    cy.findByRole('textbox', { name: /etternavn/i }).type('Hansen');
+    cy.findAllByRole('button', { name: /lagre og lukk/i })
+      .first()
+      .click();
+
+    cy.changeLayout((component) => {
+      for (const _dmb of Object.values(component.dataModelBindings ?? {})) {
+        const binding = _dmb as IRawDataModelBinding;
+        if (typeof binding === 'object' && binding.dataType === 'sharedperson') {
+          // If any component starts referencing this data model, the reproduction breaks. This bug specifically relied
+          // on this data model only being references via a text resource in Task_1.
+          throw new Error('Found sharedperson data model binding in Task_1');
+        }
+      }
+    });
+
+    cy.gotoNavPage('Side6');
+    cy.findByRole('radio', { name: /kåre/i }).dsCheck();
+    cy.waitUntilSaved();
+    cy.findByText(/Du må rette disse feilene før du kan gå videre/i).should('not.exist');
+
+    cy.intercept('GET', '**/data/**', (req) => {
+      req.reply((res) => {
+        if (res.body.name === 'Ola Nordmann') {
+          // Delaying the response for this data model specifically. When reproducing this bug, it relied on the query
+          // cache for an earlier request to this data model, so if the request ends before the other data models are
+          // fetched it might cover the underlying bug.
+          res.setDelay(500);
+        }
+      });
+    }).as('fetchData');
+
+    cy.findByRole('button', { name: /send inn/i }).click();
+
+    cy.findByRole('heading', { name: /fra forrige steg/i }).should('be.visible');
+    cy.findByText(/Du må rette disse feilene før du kan gå videre/i).should('not.exist');
+    cy.findByRole('button', { name: 'Neste' }).click();
+
+    // If the bug regresses, these fields will be empty
+    cy.findByRole('textbox', { name: 'Navn' }).should('have.value', 'Ola Nordmann');
+    cy.findByRole('textbox', { name: 'Adresse' }).should('have.value', 'Testveien 123');
+    cy.findByRole('textbox', { name: 'Postnr' }).should('have.value', '4609');
+    cy.findByRole('textbox', { name: 'Poststed' }).should('have.value', 'KARDEMOMME BY');
+    cy.waitUntilSaved();
+  });
+});

test/e2e/integration/multiple-datamodels-test/readonly.ts

@@ -116,7 +116,7 @@ describe('readonly data models', () => {
 
     cy.findByRole('button', { name: 'Neste' }).click();
 
-    cy.findByRole('heading', { name: /tittel/i }).should('be.visible');
+    cy.findByRole('heading', { name: /Test av delt modell/ }).should('be.visible');
     cy.waitUntilSaved();
 
     cy.then(() => expect(formDataRequests.length).to.be.eq(1));