Basic usage

Prerequisites

Make sure you've completed Getting Started first, ./gqless refers to the folder created there

Using GraphQL data within React components is straightforward.

  • Updates components when data changes
  • Suspends components whilst data is being fetched

Installation

First install @gqless/react into your project's dependencies:

yarn add @gqless/react

Usage

NOTE: Class components aren't supported

First, wrap components that are going to use GraphQL data inside graphql():

import { graphql } from '@gqless/react'
const Component = graphql(() => <div />)

Next, ensure the component is within a Suspense fallback. See here for more

import { Suspense } from 'react'
// For example, wrap the App component
const App = () => (
<Suspense fallback={<span>loading...</span>}>
<Component />
</Suspense>
)

Now simply use data inside the component:

import { query } from './gqless'
const Component = graphql(() => <div>{query.hello}</div>)

Examples

Updating the cache when a button is pressed:

import { query } from './gqless'
import { graphql } from '@gqless/react'
const App = graphql(() => {
return (
<>
<button onClick={() => (query.hello = 'Updates')}></button>
{query.hello}
</>
)
})
Last updated on by Sam Denty