@openland/spacex
v6.0.6
Published
Scalable and typesafe GraphQL client for JS, React and React Native.
Downloads
6
Readme
SpaceX GraphQL
Scalable and typesafe GraphQL client for JS, React and React Native.
Features
- 🦺Simple codegeneration with full type safety at runtime and in typescript
- 🚀~50% reduction in RAM usage and up to x20 performance in persistence (comparing to Apollo)
- 🏎Does not block main thread
- 🍰Layered design that allows replace transport, socket or graphql core implementations
Install
yarn add @openland/spacex @openland/spacex-web
yarn add -D @openland/spacex-cli get-graphql-schema
Generate Client
Requirements
- API Endpoint too download schema from (ex: https://api.example.com/graphql)
- .graphql files with operations (ex: ./src/api/definitions/*.graphql)
Generate Client
SpaceX Compiler generates three files:
spacex.definitions.json
: Descriptors of all fragments and operations for GraphQL Enginesspacex.types.ts
: Typescript fragments and operations filesspacex.ts
: Client itself
get-graphql-schema https://api.example.com/graphql --json > schema.json
yarn spacex-cli compile \
--path "./src/api/definitions/*.graphql" \
--schema ./schema.json \
--output ./src/api/ \
--name ExampleClient
Create Client
// Engine
const engine = /* Create Engine */
// Client
const client = new ExampleClient(engine)
Using client
Queries
For each query in definitions there are generated functions on client:
// Simple Promise-based api
const me = await client.queryUser({ username: 'steve' }) // returns: Promise<User>
// Provide fetchPolicy - bypass cache and fetch from network
const me = await client.queryUser(
{ username: 'steve' },
{ fetchPolicy: 'network-only' }
)
// Refetch method - sugar for fetchPolicy: 'network-only'
const me = await client.refetchUser({ username: 'steve' })
// Hook with suspence
const me = client.useUser({ username: 'steve' }) // returns: User
// Hook with fetchPolicy
const me = client.useUser(
{ username: 'steve' },
{ fetchPolicy: 'network-only' }
) // returns: User
// Hook without suspence
const me = client.useUser({ username: 'steve' }, { suspence: false }) // returns: User | null
Mutations
For each defined mutation there this generated function:
// Simple Promise-based api
const result = await client.mutateSendMessage({
chat: 'steve',
message: 'Hello, SpaceX!'
})
Subscriptions
For each defined mutation there this generated function:
// Subscription
const subscription = client.subscribeNewMessages({ chat: 'steve', from: Date.now() }, handler: (e) => {
if (e.type === 'stopped') {
// Subscription stopped
// No more updates in this handler
} else if (e.type === 'message') {
// Received message
const message = e.message;
}
});
// Destroy subscription
subscription.destroy();
Reading and Writing to Store
If you want to edit store you are able to update queries in the store via update*
functions:
await client.updateUser({username: 'stever'}, updated: (src) => {
return {
...src,
friends: src.friends + 1
};
});
License
MIT