Lightweight component that allows you to interact with a GraphQL API using React Suspense
Branch: master
Clone or download
Dabit
Latest commit 03d1203 Feb 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md updated readme Feb 8, 2019
header.jpg updated readme Feb 7, 2019
main.js updated comments Feb 7, 2019
package.json version bump Feb 7, 2019

README.md

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-suspense

Usage (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> 
)