graphql-js-client
Feature light client library for fetching resources via GraphQL.
Table Of Contents
Installation
With Yarn:
$ yarn add graphql-js-client
With NPM:
$ npm install graphql-js-client
Examples
GraphQLClient
requires a "type bundle" which is a set of ES6 modules generated by graphql-js-schema
that represent your GraphQL schema.
Initialization
; // This is the generated type bundle from graphql-js-schema; const client = types url: 'https://graphql.myshopify.com/api/graphql' fetcherOptions: headers: `Authorization: Basic aGV5LXRoZXJlLWZyZWluZCA=` ;
Creating and sending a query
const query = client; /* Will generate the following query: query { shop { name products (first: 10) { pageInfo { hasNextPage hasPreviousPage } edges { cursor node { id title } } } } } Note: things that implement Node will automatically have the id added to thequery. `addConnection` will automatically build out the connection query withall information necessary for pagination. */ let objects; client;
Refetching Nodes
client;
In the above example, objects.shop.products[0]
implements the Node interface.
The client is smart enough to understand this, and generate the following query:
query { __typename ... on Product id title }
It then resolves directly with the node
field, which is a product in this
case.
Pagination
const query = client; client;
The client understands the Relay
specification, and will send the following query for the call
client.fetchNextPage(model.shop.products)
:
query { shop { name products (first: 10, after: 'abc123') { pageInfo { hasNextPage hasPreviousPage } edges { cursor node { id title variants (first: 50) { pageInfo { hasNextPage hasPreviousPage } edges { cursor node { id title price } } } } } } }}
The client can also use the Node interface to optimize queries for nested
paginated sets. fetchNextPage
in the second case
client.fetchNextPage(model.shop.products[0].variants)
will generate the
following query:
query { node (id: '1') { __typename ... on Product { id variants (first: 50, after: 'abc123') { id title price } } }}
In both cases, fetchNextPage
resolves with the models you're paginating, since
the object graph to those models may not be obvious due to the query generation
algorithm. Page size and fields on the paginated object are retained, while
fields not in the paginated set are pruned.
Documentation
For full API documentation, check out the API docs.
Contributing
Setting up:
$ git clone git@github.com:Shopify/graphql-js-client.git$ cd graphql-js-client$ yarn install
Running the tests in a browser
$ yarn start
Then visit http://localhost:4200
Running the tests in node
$ yarn test
License
MIT, see LICENSE.md for details.