Forem: Michael Vogt

State Management and Context with Tanstack-Query

Michael Vogt — Mon, 24 Mar 2025 07:52:01 +0000

There are so many articles out about state-management and solving it with Tanstacks React-Query but I was missing the very basic idea. No reducer pattern, just telling how to deal with it.

Why this is important: I use Tanstack-Start and I do not want to have some Provider for custom React context and stuff like this.

I also wanted to avoid having additional libs for state management because this implies an additional learning curve for the developers.

Here is some example code that just uses the capabilities of Tanstack-Query to implement a context without any additional code needed. My example uses a custom and simple React-Hook but you can use the state anywhere in your app using Tanstack Query standard Api.

Prerequisite: You need to access the Tanstack Query Client by useQueryClient() - but this pattern should be already in place, even in Tanstack-Router (incl. Tanstack-Start).

In this example you can also enrich your context with some data from the server if needed. You could just skip the loadSomethingFromYouApi call if it is not needed.

import { useQuery, useQueryClient } from '@tanstack/react-query'

export const useMyContext = () => {
   const queryClient = useQueryClient()
   const { context, isLoading } = useQuery({
      queryKey: ['MyContext'],
      staleTime: Infinity,
      queryFn: async () => {
         const serverData = await loadSomethingFromYourApi()
         return {
            serverFoo: serverData.foo
            clientStuff: 'from the client'
         }
      }
   })
   return {
      context
      isLoading
      setContext: (updater: (oldContext) => void) => queryClient.setQueryData('MyContext', updater)
   }
}

...and voila: You can use useMyContext like you use any other React-Context within your app incl. some async call to some API if needed (or some createServerFn of Tanstack Start if you have that in place).

An additional benefit would be to use queryClient.invalidateQuery(['MyContext']) if you want to reload stuff from the server as well.

Happy coding,
Michael

TanStack-Start & KeycloakJS client library

Michael Vogt — Wed, 22 Jan 2025 16:03:17 +0000

The problem with my other TanStack start post was: I did not use the keycloakJS official client library.

Plus I wanted a solution that also works with TanStack-Router loading, pre-fetching and router-based context.

Here is the example where it all comes together:

https://github.com/progwise/tanstack-start-keycloak

It turned out that the biggest issue is to invalidate the router-context correctly. It was not enough to call

router.invalidate()

keycloak.onAuthSuccess`

But I needed to re-calculate the context using some beforeLoad:

export const Route = createFileRoute("/")({
  component: Home,
  beforeLoad: ({ context }) => {
    console.log("index beforeload");
    return { ...context, auth: { ...context.auth } };
  },
  loader: async ({ context }) => {
    console.log("index auth loader", context.auth);
  },
});

If you just leave out this beforeLoad login never shows up on the page.

The heart of my solution is wiring up keycloak on createRouter in router.tsx.

export function createRouter() {
  const queryClient = new QueryClient();

  const keycloak = getKeycloak();
  const auth = {
    isLoggendIn: !!keycloak.authenticated,
    login: () => {
      keycloak.login();
    },
    logout: () => {
      keycloak.logout();
    },
    user: {
      username: keycloak.tokenParsed?.preferred_username,
      name: keycloak.tokenParsed?.name,
      email: keycloak.tokenParsed?.email,
    },
  };
  const router = createTanStackRouter({
    routeTree,
    context: { queryClient, auth },
    defaultPreload: "intent",
    defaultErrorComponent: (error) => (
      <div>Ups, something went wrong! {JSON.stringify(error, null, 2)}</div>
    ),
    defaultNotFoundComponent: () => <div>Not found!</div>,
    defaultPendingComponent: () => <div>Loading...</div>,
  });

  keycloak.onAuthSuccess = async () => {
    auth.isLoggendIn = true;
    auth.user = {
      username: keycloak.tokenParsed?.preferred_username,
      name: keycloak.tokenParsed?.name,
      email: keycloak.tokenParsed?.email,
    };
    await router.invalidate({});
  };
  return routerWithQueryClient(router, queryClient);
}

My trick is:

Create some keycloakJS instance
Create an auth context object with references to the router
Create the router using createTanStackRouter
invalidate the router `keycloak.onAuthSuccess'

But it was clear that is not enough to amend the auth-object of the context. The context itself has to keep track if the auth-object changed. I could not solve it but my workaround was the beforeLoad instruction in the component that handles the login.

export const Route = createFileRoute("/")({
  component: Home,
  beforeLoad: ({ context }) => {
    console.log("index beforeload");
    return { ...context, auth: { ...context.auth } };
  },
  loader: async ({ context }) => {
    console.log("index auth loader", context.auth);
  },
});

Would be glad to see if someone comes up with a better solution on that.

The keycloak Object Creation needs special attention, because it expects a browser and on TanStack-Start you never know ;)

import Keycloak from "keycloak-js";

const getKeycloak = () => {
  const keycloak = new Keycloak({
    url: "http://localhost:8280",
    realm: "master",
    clientId: "tanstack-start-keycloak",
  });

  if (typeof window !== "undefined") {
    keycloak.init({
      onLoad: "check-sso",
    });
  }
  return keycloak;
};

export { getKeycloak };

How to oAuth2 Code Flow using Tanstack Start

Michael Vogt — Mon, 06 Jan 2025 10:01:30 +0000

I just developed a Tanstack-Start example for an OAuth2 Code-Flow login to github, google and keycloak.

I wanted to login without any library usage to find out the differences of these identity-providers. And there are many small things like params required, getting the token from auth-code has slightly different fetch requirements, e.g. including params in the POST body instead of query-params etc. .

This example code was inspired by (https://www.youtube.com/watch?v=rRn2EisxPl4) but I did not use expressJS because Tanstack has all we need in server-side functions.

(https://tanstack.com/router/latest/docs/framework/react/start/server-functions)

Here is my example:

(https://github.com/progwise/tanstack-auth-examples)

Happy coding!
Michael

For a TanStack-Start solution that uses the keycloakJS library see my other article/example:

(https://dev.to/moncapitaine/tanstack-start-keycloakjs-client-library-4f84)

(https://github.com/progwise/tanstack-start-keycloak)

How to use testing-library in Angular 15

Michael Vogt — Wed, 22 Mar 2023 17:19:19 +0000

The included karma/jasmine tests do not follow modern testing-principles like role selectors.

Therefore I recommend removing these tests and replace them with the more useful testing-library approach.

Steps to setup testing-library in an Angular 15 project

Remove the karma/jasmine tests

remove all karma & jasmine dependencies from the package.json

npm remove -D @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

Install testing-library

npm i -D @testing-library/dom @testing-library/angular

Install jest test runner

We use jest-preset-angular build on top of ts-jest.

 npm i -D jest @types/jest jest-preset-angular

Create jest configuration file in root: jest.config.js

module.exports = {
  preset: "jest-preset-angular",
  setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"]
};

create setup-jest.ts, also includes the most important mocks...

import 'jest-preset-angular/setup-jest';
Object.defineProperty(window, 'CSS', { value: null });
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>',
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance'],
    };
  },
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

change test script

Inside the package.json just replace the test script

from

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest --watch"
  },

and remove the test settings from angular.json

...
      "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
...

create a single angular module definition

I always have a single angular module definition I can pass to testing-library/angular render method. I just reuse it all the time


export const testModule = {
  declarations: [
    // ...all the declarations from the app.module.ts
  ],
  imports: [
    // ...all the imports from the app.module.ts
    BrowserModule,
    AppRoutingModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
};

enjoy

npm run test

should just run the tests inside jest. The existing tests in spec file should be replace by testing-library style tests.

example test:

import { screen, render } from '@testing-library/angular';
import { testModule } from '../../test.module';

import { CreateAppointmentPageComponent } from './create-appointment-page.component';

describe('CreateAppointmentPageComponent', () => {
  it('should create', async () => {
    await render(CreateAppointmentPageComponent, testModule);
    screen.logTestingPlaygroundURL();
  });
});

known issues

import from src folder does not work, it just does not find something under e.g.

import { TestService } from 'src/app/services/testService.ts'

instead I try always to use relative imports, I never had trouble using them...

import { TestService } from '../../services/testService.ts'

Reliable Web Apps 2022

Michael Vogt — Tue, 30 Aug 2022 16:30:58 +0000

Just want to share my experience as a freelance software developer over the last 5 years working with different teams on B2C web applications in the cloud.

Dont write too much code

Big drivers for too much code are

DI (dependency injection)

A nice example is DI (dependency injection) for improving testability. This is only true if you do not have technologies that mock or simulate dependencies, e.g. some http client. But in all web-frameworks these technologies exist, e.g. you could use MSW (Mocked-Service-Workers).

In rare cases DI makes sense to enable an easy replacement of deeper layers, e.g. replacing the mail provider, but only use DI to enable testing of layers of your application introduces complexity that does not help the customer.

OO (object-orientation)

For sure there are benefits from it, but using inheritance and defining too much classes introduce abstraction that needs to be understood by other developers. Why should I split non-reusable routines in several classes? You need to jump around and find stuff instead of understanding the underlying problem. Hiding the problem in many small parts results in more code and less clarity.

Simplify the layers

Having a repository layer and a controller layer plus domain interfaces is enough in most cases. Sometimes you need to add some domain algorithms that can be implemented with simple POCOs - that's it.

I more often see (mainly JAVA backend REST services) where almost all classes depend on something else in any layer. Dependencies have to follow rules as:

The repositories return domain objects
The controllers access repositories to return those objects => Controllers reference repositories and domain classes => Repositories only reference domain layer => Domain objects reference nothing

What problem needs more dependencies?

Write the right tests

Sure it was enlightening 10 years ago to learn about DI and how to write unit tests, but unit tests are rare - not many units have that much logic that needs to be tested.

It is more important to know if a controller does the right thing than to have unit tests for every layer. Therefore some level of integration seems to be the right way.

There is nothing like a rock-solid definition of integration tests, there is only the idea that it is less effort and more meaningfulness if integrating stuff.

Write a single test covering stuff that belongs together
Mock stuff like Network dependencies
Only tests with easy-to-understand titles improve the quality

Deliver and integrate small changes

The bigger the change the higher the risk. This is true on both levels:

Merge changes into your main branch
Deploy changes into production

=> Every single small change needs to be deployed to productionn instantly, else the risk to break the production system is rising

The question is: How can this be achieved?

Automated quality gates

You cannot manually check for every side-effect a small change in the code has => All quality gates must run automatically.

Always review code changes and ask questions
Deny changes that do not have tests
Every fix has at least one new test that prevents the bug from happening again
In addition to the unit- and integration tests you need a fully integrated environment you run automated user journeys on using Cypress, Playwright or something similar

Use a checklist on every Pull Request

What could possibly go wrong?
Is there any test that should be added on unit or integration level

Add smoke-tests for your production environment

To be sure that your production system is up and running, add the most important user journeys as Cypress or Playwright tests and execute them avery 10 minutes against your production.

You will be able to detect errors that made it through all quality gates earlier than your customers. When the phone rings you can smile, tell them that the issue is already fixed and apologize for any inconvinience.

Watch your error logs

At least on a daily base. If something is red, discuss in the team immediatly the needed fix, do never accept recurring red flags, your sense will deaden.

Trust every developer

If a developer is aware that his changes will go to production and could jeopardize the whole product, then he will deliver high quality, he will not accept doubts if his code will run, he will be sure.

The feedback loop

If some accident happened, find the reason and address it. There is always a good idea that can be implemented to avoid the accident in the future.

Infrastructure as code

When I experienced it first I was enthusiastic about building new environments whenever I need them. In reality this one never was a point. Instead it turned out that infrastructure as code is just the best way to have a 100% accurate description about your environments. Thats it, not more and not less.

How to start a developer career in 2020?

Michael Vogt — Mon, 25 Nov 2019 20:50:16 +0000

Last friday I organized the first german east coast DevOps meetup. That was really cool to get in touch with this guys because Greifswald is a real outlying town in the very north-east of germany.

Because I do development since so many years it was hard to prepare for my lecture on this topic and I found out that it will be hard as a newbie to get some orientation.

Here is what I thought is a good starting point:

Do the Angular Tour of Heroes or the REACT TicTacToe and get in touch with the concepts and fundamental Javascript/HTML/CSS stuff and try doing it in Typescript
https://www.w3schools.com/html/
https://angular.io/tutorial/toh-pt0
https://reactjs.org/tutorial/tutorial.html
https://www.typescriptlang.org/docs/home.html
Discover REST API development
https://scotch.io/tutorials/speed-up-your-restful-api-development-in-node-js-with-swagger
https://docs.microsoft.com/de-de/azure/architecture/best-practices/api-design
Learn about databases and persistance
http://www.postgresqltutorial.com/
https://flywaydb.org/
Learn Docker
https://docs.docker.com/engine/docker-overview/

Use Docker

docker run --rm --name pg-docker -e POSTGRES_DB=farm-history-db -d -p 5432:5432 -v $DATA:/var/lib/postgresql/data  postgres

Learn about JWT
https://jasonwatmore.com/post/2019/06/22/angular-8-jwt-authentication-example-tutorial
Learn E2E Testing
https://www.protractortest.org/#/tutorial
https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
Deploy stuff to the cloud using Terraform
https://www.terraform.io/intro/index.html

There are so many other things like patterns, unit testing, git, npm, Scala, .NET core, other DB types, ... the list seems endless but the topics mentioned here you need to become familiar to decide on other technologies.

This is it, basic stuff is on the way and you are not lost in translation any more.

Regards,
Michael