This is a driver for all your pure-most Cycle apps (think Motorcycle) that talks to a GraphQL endpoint.

It uses Apollo Client underneath.

• the graphql endpoint defaults to /graphql, but it can be changed by passing the endpoint='/something' option to makeGraphQLDriver;
• withCredentials is enabled by default (and there's no way to change it);
• to send custom headers with the GraphQL requests, it is possible to either
  • specify the headers through the headers={authorization: 'token xyz'} option to makeGraphQLDriver; or
  • emit an object with a key headers (example: {headers: {authorization: 'token xyz'}}) as an event in the stream that the driver is consuming.

Install

npm install --save cycle-graphql-most-driver

Use

1import most from 'most'
2import hold from '@most/hold'
3import Cycle from '@cycle/most-run'
4import {makeDOMDriver, h} from '@motorcycle/dom'
5import {makeGraphQLDriver, gql} from 'cycle-graphql-most-driver'
6
7Cycle.run(app, {
8  DOM: makeDOMDriver('#container'),
9  GRAPHQL: makeGraphQLDriver({
10    endpoint: '/graphql',
11    templates: {
12      fetchItem: gql`
13query fetchItem($id: ID!) {
14  item($id) {
15    id
16    name
17    description
18    events {
19      time
20      value
21    }
22  }
23}
24      `,
25      fetchAll: gql`
26query {
27  items {
28    id, name
29  }
30}
31      `,
32      setItem: gql`
33mutation setItem($id: ID!, $name: String, $desc: String) {
34  setItem($id, $name, $desc) {
35    id
36  }
37}
38      `
39    }
40  })
41})
42
43function app ({DOM, GRAPHQL}) {
44  let response$ = GRAPHQL
45    .flatMap(r$ => r$
46      .recoverWith(err => most.of({errors: [err.message]}))
47    )
48    .filter(({errors}) => {
49      if (errors && errors.length) {
50        console.log('errors:', errors)
51        return false
52      }
53      return true
54    })
55    .map(({data}) => data)
56
57  let itemList$ = response$.filter(data => data.items)
58
59  let vtree$ = itemList$
60    .map(items =>
61      h('ul', items.map(item =>
62        h('li', {props: {id: item.id}}, item.name)
63      ))
64    )
65
66  return {
67    DOM: vtree$,
68    GRAPHQL: most.from([{
69      query: 'fetchItems'
70    }, {
71      mutation: 'setItem',
72      variables: {
73        id: 123,
74        name: 'an item',
75        desc: 'this is an item'
76      }
77    }])
78  }
79}