A <DeferredQuery> react component that loads a react-apollo <Query> on demand.

DeferredQuery.jsx

import React from 'react'
import { Query } from 'react-apollo'

export const DeferredQuery = ({ children, ...props }) => {
  const [skip, setSkip] = React.useState(true)
  const load = () => setSkip(false)
  return (
    <Query skip={skip} {...props}>
      {args => children({ ...args, load })}
    </Query>
  )
}

DeferredQuery.propTypes = Query.propTypes

Example.jsx

import React from 'react'
import gql from 'graphql-tag'
import { DeferredQuery } from './DeferredQuery.jsx'

const EXAMPLE_QUERY = gql`
  {
    user {
      name
    }
  }
`

export const Example = () => (
  <DeferredQuery query={EXAMPLE_QUERY}>
    {({ load, loading, error, data }) =>
      data ? (
        <p>{data.user.name}</p>
      ) : error ? (
        <p>Loading failed!</p>
      ) : (
        <button onClick={load} disabled={loading}>Load</button>
      )
    }
  </DeferredQuery>
)