You don't need to install Node.js ecosystem on your computer.
Query merging to reduce request number.
Overview
GraphQL is based on a very simple HTTP transaction, which sends a request to an endpoint
with query and variables.
Many libraries require complex stacks to make that simple request.
In any project you don't use React, Relay, you'll need a simpler
client which manages your query and makes a simple request.
npm install graphql.js --save
# or
yarn add graphql.js
Using with Rails Asset Pipeline
You can use GraphQL.js with Rails Asset Pipeline using graphqljs-rails.
Using
GraphQL.js is isomorphic. You can use it in both browser and Node.js.
Use in Browser
<scriptsrc="/path/to/graphql.js"></script>
Use in Node.js
vargraphql=require('graphql.js')
Or using import
importgraphqlfrom'graphql.js'
Connection
Create a simple connection to your GraphQL endpoint.
vargraph=graphql("http://localhost:3000/graphql",{method: "POST",// POST by default.headers: {// headers"Access-Token": "some-access-token"// OR "Access-Token": () => "some-access-token"},fragments: {// fragments, you don't need to say `fragment name`.auth: "on User { token }",error: "on Error { messages }"}})
Executing Queries and Mutations
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 resultconsole.log(response)}).catch(function(error){// response is originally response.errors of query resultconsole.log(error)})
Prepare Query for Lazy Execution
You can prepare queries for lazy execution. This will allow you to reuse your queries with
different variables without any hassle.
varlogin=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"})
Direct Execution with .run and ES6 Template Tag
If your query doesn't need any variables, it will generate a lazy execution query by default.
If you want to run your query immediately, you have three following options:
// 1st option. create and run function.graph(`...`)()graph.query(`...`)()graph.mutate(`...`)()//...// 2nd option. create and run function with `run` method.graph.run(`...`)graph.query.run(`...`)graph.mutate.run(`...`)// 3rd option. create and run function with template tag.graph`...`graph.query`...`graph.mutate`...`
I don't recommend using this. Using it too much may break DRY. Use lazy execution as much as possible.
Prefix Helpers
You can prefix your queries by simply calling helper methods: .query, .mutate or .subscribe
varlogin=graph.query(`($email: String!, $password: String!) { auth(email: $email, password: $password) { ... on User { token } }}`)varincrement=graph.mutate`increment { state }`varonIncrement=graph.subscribe`onIncrement { state }`
Automatic Declaring with @autodeclare or {declare: true}
Declaring primitive-typed (String, Int, Float, Boolean) variables in query were a
little bothering to me. That's why I added an @autodeclare keyword or {declare: true} setting to the processor.
It detects types from the variables and declares them in query automatically.
varlogin=graph.query(`(@autodeclare) { auth(email: $email, password: $password) { ... on User { token } }}`)login({email: "[email protected]",// It's String! obviously.password: "my-super-password"// It is, too.})
Let's say you have a rating query that accepts an argument with a Float argument named rating.
GraphQL.js will declare 10 value as Integer since it casts using value % 1 === 0 ? 'Int' : 'Float' check.
// Add some fragments...graph.fragment({username: {user: `on User { username }`,admin: `on AdminUser { username, administrationLevel }`}})// Get any fragment with its path...varadmin=graph.fragment('username.admin')// Build your query with using fragment paths or dynamic template variables.varquery=graph.ql`query { ...username.user ...${admin}}`// Use query anywhere...$.post("/graphql",{query: query},function(response){ ... })
请发表评论