環境変数

Cloudflare

.evn.developmentという環境変数を作ると、process.envでundefinedしか返ってこない。.env.development.localに変えても同様。env.localに変更すると環境変数が取得できた。

• Cloudflare Docsのクイックスタートコマンドからだと .env と .env.localしか読まれない。

• Cloudflare用の設定をしないTanstack Startを作るとenv.development.localでも値が取得できる。

対策：保留

• pnpm run cf-typegenで環境変数の型生成と関係している可能性大

refresh

Nextjsの router.refresh()に相当するのは、 router.invalidate()

import { useRouter } from "@tanstack/react-router";

const router = useRouter();

router.invalidate();

ルート

2パターンのルート定義（ localhost:3000/post）：Nextjsのようなフォルダベースの方がわかりやすい

1. /post/index.tsx

2. post.tsx

APIルート：

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/api/test")({
  server: {
    handlers: {
      GET: () => {
        return new Response('Hello "/api/test"!');
      },
    },
  },
});

• routes/apiフォルダ内にファイルを作成する必要は必ずしも無く、handlersでHTTPメソッドを定義するとAPIルートになる。

ルートに含めないフォルダ：

• _をフォルダの先頭に付ける。Nextjsのルートグループ()に相当

serverFn

export const Route = createFileRoute("/about")({
  component: About,
  loader: async () => {
    return await getFn();
  },
});

  const data = Route.useLoaderData();

        {data.map((item) => (
          <div key={item.id}>
            {item.title}
            <form
              action={async () => {
                await deleteFn({ data: { id: item.id } });
                router.invalidate();
              }}
            >
              <button type="submit">Delete</button>
            </form>
          </div>
        ))}

createServerFn()：

export const getFn = createServerFn().handler(async () => {
  const prisma = new PrismaClient({ adapter: new PrismaD1(env.test_db) });
  return await prisma.todo.findMany();
});

• createServerFn()はloader:（クライアントとサーバーの両方で実行）やJSX内からも呼び出せる。

createServerOnlyFn()：

export const getFn = createServerFn().handler(async () => {
  return await getFn2();
});

export const getFn2 = createServerOnlyFn(async () => {
  const prisma = new PrismaClient({ adapter: new PrismaD1(env.test_db) });
  return await prisma.todo.findMany();
});

• loader: 内でも直接呼び出すことは出来ないので、使い方としてはcreateServerFn()の中で呼び出す形になる。

RSC

const Header = async () => {
  const admin = await isAdmin();
  
  admin && return ({
})

• TanstackはSSR（サーバーでHTML生成）はするがReact Server Components（RSC）は使わないので、切り分けたコンポーネント単位でNext.jsのようにサーバーで完結する処理はできない。

• createServerFnはAPIに問い合わせてサーバー処理を実行するので、関数のロジックは見えないものの関数名や返り値はクライアントからわかる。

  const { data } = useQuery({
    queryKey: ["tags"],
    queryFn: getTags,
  });

• 切り分けたコンポーネントでserverFnを使う場合は useQueryを使う。