2019-02-26 23:44:45 +01:00
|
|
|
import { useGraphQL } from 'graphql-react'
|
2019-01-09 10:24:38 +01:00
|
|
|
|
2019-02-26 23:44:45 +01:00
|
|
|
export default () => {
|
|
|
|
const { loading, cacheValue = {} } = useGraphQL({
|
|
|
|
fetchOptionsOverride (options) {
|
2019-01-09 10:24:38 +01:00
|
|
|
options.url = 'https://graphql-pokemon.now.sh'
|
2019-02-26 23:44:45 +01:00
|
|
|
},
|
2019-03-27 21:12:45 +01:00
|
|
|
operation: {
|
|
|
|
query: `
|
2019-01-09 10:24:38 +01:00
|
|
|
{
|
|
|
|
pokemon(name: "Pikachu") {
|
|
|
|
name
|
|
|
|
image
|
|
|
|
}
|
|
|
|
}
|
2019-03-27 21:12:45 +01:00
|
|
|
`
|
|
|
|
}
|
2019-02-26 23:44:45 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
const { data } = cacheValue
|
|
|
|
return data ? (
|
|
|
|
<img src={data.pokemon.image} alt={data.pokemon.name} />
|
|
|
|
) : loading ? (
|
|
|
|
<p>Loading…</p>
|
|
|
|
) : (
|
|
|
|
<p>Error!</p>
|
|
|
|
)
|
|
|
|
}
|