SUBSPACE

apollo-client

To use Subspace with apollo-client, a composed ApolloLink must be defined using the apollo-link-rxjs and reactive-graphl npm packages. Notice that the addTypename option of InMemoryCache must be set false.

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloLink } from "apollo-link";
import { rxjs as rxJsLink } from "apollo-link-rxjs";
import { graphql } from "reactive-graphql";

const client = new ApolloClient({
  // If addTypename:true, the query will fail due to __typename
  // being added to the schema. reactive-graphql does not
  // support __typename at this moment.
  cache: new InMemoryCache({ addTypename: false }),
  link: ApolloLink.from([
          rxJsLink({}),
          new ApolloLink(operation => graphql(schema, operation.query))
        ])
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Example



































 
 
 
 
 
 
 
 
 
 
 
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloLink } from "apollo-link";
import { rxjs as rxJsLink } from "apollo-link-rxjs";
import { graphql } from "reactive-graphql";

// ...

// Initialize Subspace
const subspace = new Subspace(web3.currentProvider); // Use a valid provider (geth, parity, infura...)
await subspace.init();

const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance

const typeDefs = `
  type MyEvent {
    someValue: Int
    anotherValue: String
  }
  type Query {
    myEvents: MyEvent!
  }
`;

const resolvers = {
  Query: {
    myEvents: () => {
      return subspace.trackEvent(MyContractInstance, 'MyEvent', {filter: {}, fromBlock: 1})
    }
  }
};

const schema = makeExecutableSchema({ typeDefs, resolvers });

const client = new ApolloClient({
  // If addTypename:true, the query will fail due to __typename
  // being added to the schema. reactive-graphql does not
  // support __typename at this moment.
  cache: new InMemoryCache({ addTypename: false }),
  link: ApolloLink.from([
          rxJsLink({}),
          new ApolloLink(operation => graphql(schema, operation.query))
        ])
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

Using react-apollo

A practical example can also be found in examples/react-apollo.

← Tutorial→