GraphQL Suspense
Easily add suspense to your GraphQL app.
Warning, the React docs say that Suspense does not yet support data loading, so in the future there may be breaking changes & better options available. This is experimental, feel free to send prs for improvements.
Install
yarn add graphql-suspense
# or
npm install graphql-suspenseUsage (Apollo)
import React, { Component, Suspense } from 'react'
import gqlsuspense from 'graphql-suspense'
// Define Apollo client
const client = new ApolloClient({
uri: "<SOMEURI>"
})
class Data extends React.Component {
render() {
const data = gqlsuspense(client.query, { query: listTodos })
return data.data.listTodos.items.map((t, i) => <p key={i}>Yo! {t.name}</p>)
}
}
const App = () => (
<Suspense fallback={<div>loading...</div>}>
<Data />
</Suspense>
)Usage (AWS Amplify)
import React, { Component, Suspense } from 'react'
import gqlsuspense from 'graphql-suspense'
import { API, graphqlOperation } from 'aws-amplify'
class Data extends React.Component {
render() {
const data = gqlsuspense(API.graphql(graphqlOperation(listTodos)))
return data.data.listTodos.items.map((t, i) => <p key={i}>Yo! {t.name}</p>)
}
}
const App = () => (
<Suspense fallback={<div>loading...</div>}>
<Data />
</Suspense>
)