future-query-library

superquerylib.md

Components

const List = () => {
  return useQuery(gql`items(variant: "recent")` { min: 10 })
    .map(({ id: idPromise }) => <Item id={idPromise} />)
}

const Item = ({ id: idPromise }) => {
  const data = useQuery(gql`node(id: $id)`, { id: idPromise })
  return <div>
    Hello {data.name}
    <Detail id={id} />
  </div>
}

const Detail = ({ id: idPromise }) => {
  const data = useQuery(gql`node(id: $id)`, { id: idPromise })
  return <div>
    {data.detail}
  </div>
}

Hoist all queries into single query from client (in GraphQL like syntax)

query List {
  items(variant: "recent") {
    id &ref_id
  }
  node(id: &ref_id) {
    detail
    name
  }
}

Query against DB

SELECT name, detail FROM items OREDER BY created_at desc LIMIT 10

1. 各コンポーネントのクエリではその場所で必要なデータだけ要求、一旦データ自体のPromiseを使って仮の構造を返すことで下位のコンポーネントツリーを構築できる
2. IDには型がついているのでnodeに渡した時点で型が確定する
3. 使うデータは自分で書かずに実際にJSXに書かれている情報から取得
4. クライアントサイドからのクエリはまとめられる、さらに連鎖するクエリも結果を参照できるような仕組み
5. サーバサイドで参照をひもといてまとめてくれるリゾルバ