GraphQL Client

GraphQL Client provides minimal support to communicate (query and mutate) with the GraphQL server. In K2, communicating with your GraphQL server is as easy as passing url of your GraphQL server and graphQLOptions with the actual query string, and that's it!

Usage

1. Import any component from @k2/d3-viz or @k2/rv-viz.

import { BubbleChart } from "@k2/d3-viz";

2. Pass your query (of type query or mutation) and variables wrapped in graphQLOptions

<BubbleChart

url="server/api/data"

graphQLOptions={{

query: "{

query getUser($name) {

user(name: $name) {

username,

age,

location

}

}

}",

variables: { name: "John" },

}}

urlOptions={{

headers: {

authentication: 'Bearer..'

}

}}

/>

Example

Live Editor

Please note that, you can still pass auth tokens or custom headers inside of the urlOptions prop.

Custom Types

GraphQLVariable

type GraphQLVariable = {

[key: string]: any;

};

GraphQLOptions

type GraphQLOptions = {

query: string;

variables?: GraphQLVariable;

};

Limitations

• Currently, K2, only supports GraphQL types of query and mutation. type subscription is not supported at the moment.