graphql-query-until
v0.1.0
Published
GraphQL fetch with end of cursor. It is useful when you requires SSR. It's universal lib. Built on top of apollo-graphql.
Downloads
3
Readme
GraphQL Query Until
under develop, publish yet.
graphql-query-until
is designed for special case of SSR.
If you need to fetch data until last(or specific) cursor(offset), but apollo-client
<Query>
's fetchMore doesn't seem to work in SSR(by getDataFromTree
function).
So I tried to handle <Query>
recursive way, and it works.
graphql-query-until
is helper to handle this case. works {server, client} side both.
Installation
npm install graphql-query-until
Usage
Interface
interface Props<Props = any, Data = any, Variables = any> {
query: DocumentNode
getNextCursor: (data: Data) => string|undefined
merge: (prev: Partial<Data>, next: Data) => Partial<Data>
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.
QueryUntil.defaultProps = {
cursorProp: 'cursor',
variables: {
[this.cursorProp]: null,
},
data: {}
}
If you specified
cursorProp
, you MUST setvariables
to include cursor property you specified, eg,{[cursorProps]: null}
example
Use github GraphQL API
import * as React from 'react'
import {QueryUntil} from 'graphql-query-until'
const User: React.SFC<{user: any}> = /* implement some component */
export const QLGithubUser: React.SFC = () =>
<QueryUntil
query={query}
getNextCursor={data => {
const {hasNextPage, endCursor} = data.user.repositories.pageInfo
if (hasNextPage) {
return endCursor
}
}}
merge={(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...' : <User {...data}/> }
</QueryUntil>
LICENSE
MIT