useQuery reusable

RandomGiphy.jsx

import { observer } from 'mobx-react-lite'

const RandomGiphy = observer(() => {
  const settings = useSettings()
  const giphy = useRandomGiphy(settings.tag)
  return giphy ? <img src={giphy.url} /> : null
})

useRandomGiphy.js

import { useDisposable } from 'mobx-react-lite'

export function useRandomGiphy(tag) {
  const { data, refetch } = useQuery(
    RandomGiphyQuery, {
      variables: { tag }
    }
  )
  return data ? data.giphy.random : null
}