Apollo ClientのuseQueryはPersisted Query Hashだけでdata fetchingできるのか？

Persisted Query を使うのであれば、 Client Side で DocumentNode を生成するのは bundle size が大きくなったり runtime での処理が増えたりと無駄が多い。
useQuery に Persisted Query Hash を渡すだけで data fetching ができれば上記の無駄を省くことができるが、これが Apollo Client 上で可能なのかを調査する。

progfay

useQuery 関数の第一引数は query: DocumentNode | TypedDocumentNode<TData, TVariables> となっている。

progfay

useQuery 関数に渡った第一引数は verifyDocumentType(query, DocumentType.Query) にて検証されている。

verifyDocumentType 関数によって operation.type === DocumentType.Query を満たすかどうかが確認されている。

progfay

Dirty Hack ではあるが、以下のような方法でも実現できそう。

const query = gql`
query DummyQuery {
  __typename
}
`
query.__hash = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

const Component = () => {
  const { data, loading } = useQuery(query)
  return loading ? <p>Loading</p> : <pre>{JSON.stringify(data, undefined, 2)}</pre>
}

そして query.__hash に詰められた Persisted Query Hash を Persisted Query Link 上で詰め替えればそれぞれの Query を bundle に含めることなくリクエストを成功できるはず。

progfay

とはいえ、理想としては hash を引数に渡すことで useQuery に似たことができる usePersistedQuery のような hooks が Apollo Client に追加されることが好ましい。