在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):kadirahq/lokka开源软件地址(OpenSource Url):https://github.com/kadirahq/lokka开源编程语言(OpenSource Language):JavaScript 99.5%开源软件介绍(OpenSource Introduction):lokkaSimple GraphQL client for JavaScript. Works on all the JavaScript environments including Browser, NodeJS and React Native. TOCInstallationInstall lokka and a transport layer:
UsageWe can initialize a Lokka client like this: const Lokka = require('lokka').Lokka;
const Transport = require('lokka-transport-http').Transport;
const client = new Lokka({
transport: new Transport('http://graphql-swapi.parseapp.com/')
});
Core APIBasic QueryingThen you can invoke a simple query like this: (This query will get titles of all the Star Wars films) client.query(`
{
allFilms {
films {
title
}
}
}
`).then(result => {
console.log(result.allFilms);
}); Using FragmentsYou can also create fragments and use inside queries. Let's define a fragment for the const filmInfo = client.createFragment(`
fragment on Film {
title,
director,
releaseDate
}
`);
Let's query all the films using the above fragment: client.query(`
{
allFilms {
films {
...${filmInfo}
}
}
}
`).then(result => {
console.log(result.allFilms.films);
});
MutationsGraphQL Swapi API, does not have mutations. If we had mutations we could invoke them like this: client.mutate(`{
newFilm: createMovie(
title: "Star Wars: The Force Awakens",
director: "J.J. Abrams",
producers: [
"J.J. Abrams", "Bryan Burk", "Kathleen Kennedy"
],
releaseDate: "December 14, 2015"
) {
...${filmInfo}
}
}`).then(response => {
console.log(response.newFilm);
}); To send mutations with variable, invoke them like this: const mutationQuery = `($input: SomeVarType!){
newData: createData($input) {
...${someInfo}
}
}`;
const vars = {
input: 'some data here',
};
client.mutate(mutationQuery, vars).then(resp => {
console.log(resp.newFilm);
});
Query VariablesWe can use query variables when querying the schema. const query = `
query sumNow($a: Int, $b: Int) {
sum(a: $a, b: $b)
}
`;
const vars = {a: 10, b: 30};
client.query(query, vars).then(result => {
console.log(result.sum);
}); Cache APILokka has a built in cache. But it won't be used when you are invoking the core API. For that, you need to use following APIs: Lokka.watchQuery()This API allows to watch a query. First it will fetch the query and cache it. When the cache updated, it'll notify the change. Here's how to use it. // create a query with query variables (query variables are not mandatory)
const query = `
query _($message: String!) {
echo(message: $message)
}
`;
// object pass as the query variables
const vars = {message: 'Hello'};
// create a lokka client with a transport
const client = new Lokka({...});
// watch the query
const watchHandler = (err, payload) => {
if (err) {
console.error(err.message);
return;
}
console.log(payload.echo);
};
const stop = client.watchQuery(query, vars, watchHandler);
// stop watching after a minute
setTimeout(stop, 1000 * 60); Lokka.refetchQuery()Refetch a given query and update the cache: client.refetchQuery(query, {message: 'Hello Again'}); This will notify all the watch handlers registered with Lokka.cache.getItemPayload()Get the item inside the cache for a query. const payload = client.cache.getItemPayload(query, vars); Lokka.cache.setItemPayload()Set the item inside the cache. New value will be send to all registered watch handlers. client.cache.setItemPayload(query, vars, payload);
Lokka.cache.removeItem()With this we can remove the query and vars combo from the cache. But this won't notify watch handers. client.cache.removeItem(query, vars); Lokka.cache.fireError()Fire an error for all the registered watchHandlers. client.cache.fireError(query, vars, new Error('some error')); Available TransportsDemo AppsHave a look at some sample apps: Future DevelopmentIn this version of lokka, it's just a basic API where you can query against a GraphQL Schema. This API is stable. We'll have more features in the future versions of lokka.
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论