Skip to content

Instantly share code, notes, and snippets.

@ka2n
Last active November 10, 2022 14:21
Show Gist options
  • Save ka2n/bb6f880bbd61cccc3e9f5ccfbacfdae7 to your computer and use it in GitHub Desktop.
Save ka2n/bb6f880bbd61cccc3e9f5ccfbacfdae7 to your computer and use it in GitHub Desktop.
future-query-library

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. サーバサイドで参照をひもといてまとめてくれるリゾルバ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment