https://github.com/deptno/react-apollo-query-until

:peach: GraphQL fetch with end of cursor. It is useful when you require SSR. It's universal lib. Built on top of apollo-graphql.
https://github.com/deptno/react-apollo-query-until

getdatafromtree graphql graphql-ssr query react-apollo ssr universal until

Last synced: about 1 month ago
JSON representation

:peach: GraphQL fetch with end of cursor. It is useful when you require SSR. It's universal lib. Built on top of apollo-graphql.

• Host: GitHub
• URL: https://github.com/deptno/react-apollo-query-until
• Owner: deptno
• Created: 2018-07-05T05:59:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-05T08:05:39.000Z (over 6 years ago)
• Last Synced: 2024-12-24T18:47:17.504Z (about 1 month ago)
• Topics: getdatafromtree, graphql, graphql-ssr, query, react-apollo, ssr, universal, until
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Apollo Query Until

`react-apollo-query-until` is designed for special case of SSR.

If you need to fetch data until last(or specific) **cursor(offset)**, but `apollo-client` ``'s fetchMore doesn't seem to work in SSR(by `getDataFromTree` function).  

So I tried to handle `` recursive way, and it works.

`react-apollo-query-until` is helper to handle this case. works {server, client} side both.

## Installation

`npm install react-apollo-query-until`

## Usage

### Interface 

```typescript

interface Props {

  query: DocumentNode

  getNextCursor: (data: Data) => string|undefined

  merge: (prev: Partial, next: Data) => Partial

  cursorProp?: string

  variables?: Variables

  data?: Data

}

```

> M: Mandatory, O: Optional

- [M] query - GraphQL query to fetch after next cursor, created via `graphql-tag`.

- [M] variables - GraphQL query variables. It will be use it recursively

- [M] data - If you start from legacy data(from other query), use as initial data.

- [O] cursorProp - Merge next cursor property name with `variables`, fallthrough recursively, if next fetch is required. (default: 'cursor').

- [O] getNextCursor - If you need more fetching data, return next cursor. It will be called every time data is fetched.

- [O] merge - Data accumulator.

```typescript

QueryUntil.defaultProps = {

  cursorProp: 'cursor',

  variables: {

    [this.cursorProp]: null,

  }

}

````

> If you specified `cursorProp`, you MUST set `variables` to include cursor property you specified, eg, `{[cursorProps]: null}`

### example

> Use github GraphQL API

```typescript jsx

import * as React from 'react'

import {QueryUntil} from 'react-apollo-query-until'

const User: React.SFC<{user: any}> = /* implement some component */

export const QLGithubUser: React.SFC = () =>

   {

      const {hasNextPage, endCursor} = data.user.repositories.pageInfo

      

      if (hasNextPage) {

        return endCursor

      }

    }}

    merge={(prev, data) => !prev

      ? data

      : {

      ...prev,

      user: {

        ...prev.user,

        repositories: {

          ...prev.user.repositories,

          nodes   : prev.user.repositories.nodes.concat(data.user.repositories.nodes),

          pageInfo: data.user.repositories.pageInfo

        }

    }}}

  >

    {({data, loading, fetchMore}) => (loading || !data) ? 'Loading...' :  }

  

```

## LICENSE

MIT