Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A <DeferredQuery> react component that loads a react-apollo <Query> on demand.
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
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>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.