useQuery with MobX

SettingsProvider.jsx

import React from 'react'

const context = React.createContext(mobx.observable({
  tag: 'kittens'
}))

export const SettingsProvider = ({ children }) => {
  // we can employ some persistence here and load previous settings
  // for now just return children because context already has state set
  return children
}

// hook to grab observable state
export const useSettings = () => {
  return React.useContext(context)
}

useQueryContext.js

import { useQuery } from 'react-apollo-hooks'
import { observer } from 'mobx-react-lite'

const RandomGiphy = observer(() => {
  const { tag } = useSettings()
  const { data } = useQuery(
    RandomGiphyQuery, {
      variables: { tag }
    }
  }
  // handle loading & error states...
  return <img src={data.giphy.random.url} />
})