useQuery + useContext

RandomGiphy.jsx

import { useQuery } from 'react-apollo-hooks'

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

SettingsProvider.jsx

import React from 'react'

const context = React.createContext()

export const SettingsProvider = ({ children }) => {
  // useReducer could be better candidate for a more complex scenarios
  const [settings, updateSettings] = React.useState({ tag: 'kittens' })
  return (
    <context.Provider value={{ data: settings, update: updateSettings }}>
      {children}
    </context.Provider>
  )
}

// hook to consume data only
export const useSettings = () => {
  return React.useContext(context).data
}

// hook to get update callback (or dispatch)
export const useSettingsUpdate = () => {
  return React.useContext(context).update
}