Tomáš Horáček heracek

Migration Guide: React Query → TanStack DB

Migration Pattern

Replace React Query's server state management with TanStack DB's client-side database.

BEFORE: React Query

// api/posts.ts
export const postsApi = {
  getAll: async (): Promise<Post[]> => fetch('/api/posts').then(r => r.json()),

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

Building NW.js on macOS (for Mere Mortals) {: .doctitle}

This is an annotated version of Building NW.js from the official NW.js developer documentation. It includes my experience from building NW.js binaries for macOS, both Intel (x86-64) and M1 (arm64). The latter can be easily discerned since they are block-quoted and appear in red¹.

Not on GitHub though; they aggressively sanitize HTML in Markdown. Block quotes still work 😬 ↩

	// Types for the result object with discriminated union
	type Success<T> = {
	data: T;
	error: null;
	};

	type Failure<E> = {
	data: null;
	error: E;
	};

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Angular from Scratch</title>
	<style>
	.my-component {
	font-family: Arial, sans-serif;

	#!/usr/bin/env bash

	# Abort sign off on any error
	set -e

	# Start the benchmark timer
	SECONDS=0

	# Repository introspection
	OWNER=$(gh repo view --json owner --jq .owner.login)

	import proxy from 'http2-proxy';
	import type { Plugin, ProxyOptions } from 'vite';

	export const pluginHttp2Proxy = (): Plugin => {
	let routes: Record<string, string \| ProxyOptions>;
	return {
	name: 'vite-plugin-http2-proxy',
	config: (config) => {
	const { server } = config;
	routes = server?.proxy ?? {};

	#!/bin/zsh

	:<<'ABOUT_THIS_SCRIPT'
	-----------------------------------------------------------------------

	Written by:William Smith
	Partner Program Manager
	Jamf
	[email protected]
	https://gist.github.com/b6637160b65b751824943ede022daa17

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
	<!-- not sure which one it is, so set both -->
	<key>Ensemble</key>
	<dict>
	<key>Enabled</key>
	<true/>
	</dict>