useQuery で取得した変数を 別の useQuery の variables に代入する方法

備忘録。

下のコードのようなことをしようとしても、怒られたり、動かなかったりする。

const {data: data1, loading: loading1, error: error1} = useQuery(SOME_QUERY1)
const {data: data2, loading: loading2, error: error2} = useQuery(SOME_QUERY2, {
  variables: {hoge: data1.someQuery1.hoge}
})

そのような場合は、useLazyQuery と useEffect を使う。

const {data: data1, loading: loading1, error: error1} = useQuery(SOME_QUERY1)
const [fetchSecondData , {data: data2, loading: loading2, error: error2}] = useLazyQuery(SOME_QUERY2)

useEffect(() => {
  if (data1.someQuery1.hoge) {
    fetchSecondData({variables: {hoge: data1.someQuery1.hoge}})
  }
}, [data1])

if (loading1 || loading2) return <div>loading</div>
if (error1 || error2) return <div>error</div>

return(
  <>data2.someQuery2.hoge</>
)