https://github.com/dabit3/graphql-suspense

Lightweight component that allows you to interact with a GraphQL API using React Suspense
https://github.com/dabit3/graphql-suspense

Last synced: 4 months ago
JSON representation

Lightweight component that allows you to interact with a GraphQL API using React Suspense

• Host: GitHub
• URL: https://github.com/dabit3/graphql-suspense
• Owner: dabit3
• Created: 2019-02-07T23:03:48.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-08T15:58:34.000Z (about 7 years ago)
• Last Synced: 2025-10-11T09:16:55.007Z (5 months ago)
• Language: JavaScript
• Size: 59.6 KB
• Stars: 65
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - graphql-suspense

README

          
# GraphQL Suspense

Easily add suspense to your GraphQL app.

> Warning, the [React docs](https://reactjs.org/docs/react-api.html#reactsuspense) 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.

![](header.jpg)

## Install

```sh

yarn add graphql-suspense

# or

npm install graphql-suspense

```

## Usage ([Apollo](https://www.apollographql.com/docs/react/))

```js

import React, { Component, Suspense } from 'react'

import gqlsuspense from 'graphql-suspense'

// Define Apollo client

const client = new ApolloClient({

  uri: ""

})

class Data extends React.Component {

  render() {

    const data = gqlsuspense(client.query, { query: listTodos })

    return data.data.listTodos.items.map((t, i) => 
Yo! {t.name}
)

  }

}


const App = () => (

  loading...}>

    

   

)

```

## Usage ([AWS Amplify](https://aws-amplify.github.io/))

```js

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) => 
Yo! {t.name}
)

  }

}


const App = () => (

  loading...}>

    

   

)

```