未加星标

jQuery-GraphQL - GraphQL Client for Non-Hype Projects

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
jQuery GraphQL

This is a simple library that uses jQuery's $.ajax method, $.Deferred and some utilities like $.each , and a very naive fragment implementation based on Richard Mosolgo 's Using GraphQL Without Relay post .

Features No bullshit depended, just jQuery to use its $.ajax and some utilities. Plug & Play. Runs on most of the browsers. You don't need to install Node.js ecosystem into your computer. Installation <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery-graphql.js"></script> Connection

Create a simple connection to your GraphQL.

var graph = $.graphql("http://localhost:3000/graphql", { headers: { // headers "Access-Token": "some-access-token" }, fragments: { // fragments, you don't need to say `fragment name`. auth: "on User { token }", error: "on Error { messages }" } }) Execute Query

graph will be a simple function that accepts query and variables as parameters.

graph(`query ($email: String!, $password: String!) { auth(email: $email, password: $password) { ... auth # if you use any fragment, it will be added to the query. ... error } }`, { email: "[email protected]", password: "my-super-password" }).then(function (response) { // response is originally response.data of query result console.log(response) }).catch(function (error) { // response is originally response.errors of query result console.log(error) }) Prepare Query for Execution

You can prepare queries for lazy execution.

var login = graph(`query ($email: String!, $password: String!) { auth(email: $email, password: $password) { ... on User { token } } }`) // Call it later... login({ email: "[email protected]", password: "my-super-password" }) Prefix Helpers

You can prefix your queries by simply calling helper methods: .query , .mutate or .subscribe

var login = graph.query(`($email: String!, $password: String!) { auth(email: $email, password: $password) { ... on User { token } } }`) var passwordUpdate = graph.mutate(`...`) var userAdded = graph.subscribe(`...`) Autotyping @autotype

Declaring simple-typed ( String , Int , Boolean ) variables in query may be a little bothering to me. That's why I added an @autotype keyword to the processor. It detects and adds types to the query.

var login = graph.query(`(@autotype) { auth(email: $email, password: $password) { ... on User { token } } }`) login({ email: "[email protected]", // It's String! obviously. password: "my-super-password" // It is, too. })

This will create following query:

query ($email: String!, $password: String!) { auth(email: $email, password: $password) { ... on User { token } } } A little bit advanced autotyping

You can define custom types when defining variables by using a simple "variable!Type" notation:

graph.fragment({registeredUser: ` ... on User { id name token } `}) var register = graph.mutate(`(@autotype) { userRegister(input: $input) { ... registeredUser } }`) register({ // variable name and type. "input!UserRegisterInput": { ... } })

This will generate following query:

mutation ($input: UserRegisterInput!) { userRegister(input: $input) { ... registeredUser } } fragment registeredUser on User { ... on User { id name token } } Adding Fragments Lazily

You can add fragments lazily.

// Adds a profile fragment graph.fragment({ profile: `on User { id name(full: true) avatar }` }) var allUsers = graph.query(`{ allUsers { ... profile } }`) allUsers().then(...) License

MIT.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryNode.js
分页:12
转载请注明
本文标题:jQuery-GraphQL - GraphQL Client for Non-Hype Projects
本站链接:http://www.codesec.net/view/532359.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(92)