Alexandre Rocha alxrocha

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()),

Since version 2.23, git-blame has a feature to ignore certain commits. This feature is useful to ignore large formatting or apparently unimportant changes.

How to use

Create a revisions list file. The file name is usually .git-blame-ignore-revs
Set the file as a default ignore file for blame by git config blame.ignoreRevsFile .git-blame-ignore-revs

The file format is described in git-fsck's man: https://git-scm.com/docs/git-fsck#Documentation/git-fsck.txt-fsckskipList

Using Stitches with Storybook

The setup for storybook is the same as their docs. Once you're repo is set up (Im using Typescript) and you have Stitches imported and set up (as per the stitches docs), the next step is to install Storybook.

I went with their npx setup: npx sb init (note: since my project was already set up with React/TS this command detected everything it needed to know, so there was no interactive prompt for me)

When using a styled stitches component everything will work as expected:

export const Button = styled('button', {

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

	import React from 'react';
	import { describe, it, expect } from 'vitest';
	import { render, screen } from '@testing-library/react';
	import '@testing-library/jest-dom';
	import {
	calculateSegments,
	TruncateMiddleOfString,
	} from '@/lib/string-components';

	describe('calculateSegments', () => {

	// src/routes/search/useDebouncedSearchParam.ts
	import { useEffect, useMemo, useRef, useState } from 'react'
	import { useDebouncedValue } from '@tanstack/react-pacer' // React adapter re-exports
	// Alternative import also works in examples: '@tanstack/react-pacer/debouncer'.
	// See Pacer React adapter docs. :contentReference[oaicite:5]{index=5}

	type RouteSearchFrom<RouteApi> = RouteApi extends { types: { fullSearchSchema: infer TSchema } }
	? TSchema extends Record<string, unknown>
	? TSchema
	: Record<string, unknown>

	/* Using a JavaScript proxy for a super low code REST client */
	// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
	// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
	// also see https://github.com/fastify/manifetch
	// also see https://github.com/flash-oss/allserver
	// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

	const createApi = (url) => {
	return new Proxy({}, {
	get(target, key) {


	// when T is any\|unknown, Y is returned, otherwise N
	type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

	// when T is never, Y is returned, otherwise N
	type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

	// when T is a tuple, Y is returned, otherwise N
	// valid tuples = [string], [string, boolean],
	// invalid tuples = [], string[], (string \| number)[]