Quramy

先週に同僚と会話していたときに気になっていた Experimental Test Proxy について。

https://github.com/vercel/next.js/blob/canary/packages/next/src/experimental/testmode/playwright/README.md

mugi さんの素振りメモ や この機能が実装された際の PR のコードを読んで、ようやく何が行われているかを理解した。

まず、README にある以下のコードがどこをスタブしているかであるが、

import { test, expect } from "next/experimental/testmode/playwright";

Quramy

import { cache } from "react";

import DataLoader from "dataloader";

// backend service clients
import { getPopularPosts, getUserById, getUsers } from "@/services";

const memoizedGetUserById = cache(getUserById);

const getUserLoader = () =>

Quramy

GraphQL Client における Cache の話

Client Caching

Relay や Apollo のスタンス:

• Performance 都合のみであれば、Document Cache でも十分。
• Cached Data の一貫性を保持することを考えると、Document Cache では不十分であり、正規化が必要

https://relay.dev/docs/principles-and-architecture/thinking-in-graphql/#client-caching

Quramy

import assert from "assert";
import { parse, print, DocumentNode, visit } from "graphql";

function removeUnusedFragment(document: DocumentNode) {
  const usedFragmentSet = new Set<string>();

  // mark used
  visit(document, {
    FragmentSpread(node) {
      usedFragmentSet.add(node.name.value);

Quramy

TypeScript 4.2

https://devblogs.microsoft.com/typescript/announcing-typescript-4-2/

New Features

Leading/Middle Rest Elements in Tuple Types

下記のように、Rest Elements が tuple の最初でなくても使えるようになっています。

Quramy

/**
 * 
 * Mini calc with TypeScript template string types
 * 
 * EBNF
 * 
 * ```
 * expr    = mul ("+" mul)*
 * mul     = primary ("*" primary)*
 * primary = num | "(" expr ")"

Quramy

GraphQLとクライアントサイドの実装指針

---

GraphQLって何

• Facebookが開発した クエリ言語
• 今はGraphQL Foundationに移管されている

https://quramy.github.io/graph-api-note/#/

Quramy

import { Rule } from "eslint";

const rule: Rule.RuleModule = {
  create: (context) => {
    return {
      ['NewExpression:not(:has(*.arguments)) > Identifier[name="Date"], CallExpression > MemberExpression:has(Identifier.object[name="Date"]) > Identifier.property[name="now"]']: (node: any) => {
        context.report({
          message: "Don't use side-effective Date function.",
          node,
        });

Quramy

import * as ts from "typescript";
import { SourceCode, Linter, AST } from "eslint";
import { Extra } from "@typescript-eslint/typescript-estree/dist/parser-options";
import convert from "@typescript-eslint/typescript-estree/dist/ast-converter";

function initExtra() {
  return {
    tokens: null,
    range: false,
    loc: false,

Quramy

実際にBFFの開発向けUIは、開発者以外に使ってもらってどのようなコメントがありましたか？

「便利」と言ってもらえたのがやはり一番うれしかったですね。 別の事例だと、社外のシステムへの外接部分について、必ずしもテスト環境から接続可能とは限らないケースで、API呼び出しをフックできる機能としても使えた、というのが好評でした。

フロントエンドが使いやすいように API を定義することで、バックエンド側の実装に影響を与えてしまうことはありましたか？

BFFの存在意義の１つに「マイクロサービスを開発しやすく」がある以上、なるべくそういうケースとならないように注意はしていますが、満足にできているかはわからないですね。。。 もしかしたら、より良いAPI粒度が存在するのに、バックエンドがある程度我慢してくれている部分もあるかもしれませんね。。。