Update to Next v8.0 example on with-graphql-react (#6454)
I'm working on examples/with-graphql-react changes to: - Next v7 to v8.0 and update dependencies - fix some errors for the change of graphql-react API
This commit is contained in:
parent
b8d3b7e69e
commit
fdb10d4f1d
3 changed files with 29 additions and 34 deletions
|
@ -3,12 +3,12 @@
|
|||
"private": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cross-fetch": "^3.0.0",
|
||||
"graphql-react": "^6.0.0",
|
||||
"next": "^7.0.0",
|
||||
"next-graphql-react": "^1.0.1",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.6.0"
|
||||
"cross-fetch": "^3.0.1",
|
||||
"graphql-react": "^8.0.2",
|
||||
"next": "^8.0.3",
|
||||
"next-graphql-react": "^3.0.0",
|
||||
"react": "^16.8.3",
|
||||
"react-dom": "^16.8.3"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import 'cross-fetch/polyfill'
|
||||
import { Provider } from 'graphql-react'
|
||||
import { withGraphQL } from 'next-graphql-react'
|
||||
import { GraphQLContext } from 'graphql-react'
|
||||
import { withGraphQLApp } from 'next-graphql-react'
|
||||
import App, { Container } from 'next/app'
|
||||
|
||||
class CustomApp extends App {
|
||||
|
@ -8,12 +8,12 @@ class CustomApp extends App {
|
|||
const { Component, pageProps, graphql } = this.props
|
||||
return (
|
||||
<Container>
|
||||
<Provider value={graphql}>
|
||||
<GraphQLContext.Provider value={graphql}>
|
||||
<Component {...pageProps} />
|
||||
</Provider>
|
||||
</GraphQLContext.Provider>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withGraphQL(CustomApp)
|
||||
export default withGraphQLApp(CustomApp)
|
||||
|
|
|
@ -1,31 +1,26 @@
|
|||
import { Query } from 'graphql-react'
|
||||
import { useGraphQL } from 'graphql-react'
|
||||
|
||||
export default () => (
|
||||
<Query
|
||||
loadOnMount
|
||||
loadOnReset
|
||||
fetchOptionsOverride={options => {
|
||||
export default () => {
|
||||
const { loading, cacheValue = {} } = useGraphQL({
|
||||
fetchOptionsOverride (options) {
|
||||
options.url = 'https://graphql-pokemon.now.sh'
|
||||
}}
|
||||
operation={{
|
||||
query: /* GraphQL */ `
|
||||
},
|
||||
operation: { query: `
|
||||
{
|
||||
pokemon(name: "Pikachu") {
|
||||
name
|
||||
image
|
||||
}
|
||||
}
|
||||
`
|
||||
}}
|
||||
>
|
||||
{({ data, loading }) =>
|
||||
data ? (
|
||||
` }
|
||||
})
|
||||
|
||||
const { data } = cacheValue
|
||||
return data ? (
|
||||
<img src={data.pokemon.image} alt={data.pokemon.name} />
|
||||
) : loading ? (
|
||||
<p>Loading…</p>
|
||||
) : (
|
||||
<p>Error!</p>
|
||||
)
|
||||
}
|
||||
</Query>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue