wasp-graphql
Execute a GraphQL query exactly like you would a fetch
request. No dependencies included.
Takes a url
and an init
object as input. Returns a Promise containing the results of the request.
// fetch // query // Logging the results
For additional features unique to Redux, check out redux-wasp
and redux-wasp-apollo
.
For a live, full-stack application showcasing this library in action, visit The Buzz.
Installation
Install via npm:
npm install --save wasp-graphql
Install via yarn:
yarn add wasp-graphql
Requires fetch
to be in scope.
- Modern browsers (Can I Use It?)
what-wg-fetch
/ Window.Fetch polyfillcross-fetch
node-fetch
- etc.
Use
// ES6 (with Destructuring) // ES6const query = Waspquery // ES5var Wasp = var query = Waspquery
How It Works
How to query a GraphQL server.
Write a string to request data ("fields") from a GraphQL endpoint.
Given an example string:
var myFields = `{ hero { name friends { name } }}`
Pass the query string alone as the second argument...
Or as a property called fields
for the second argument...
// Any `fetch` init property can be included as well
Or as part of a fully customized body
property (ADVANCED).
// Remember that `body` must be a JSON parsable string. Also, many GQL// servers will expect fields to be sent under a `body.query` property.const init = body: JSON credentials: 'include'
Then, you can unpack the results of query with .json()
:
Variables
GraphQL variables can be passed on as a separate property named variables
.
A longer example:
const url = '/api/starwars'const fields = ` query HeroNameAndFriends($episode: Episode) { hero(episode: $episode) { name friends { name } } }`const variables = episode: 'JEDI' // A custom body property can be used as well
Examples of good SYNTAX
// fields as a second argument // good // extended fields as a second argument // good // with a fields as a property and the default settings // good // with a fields as a property and custom fetch optionsconst config = fields: 'query FooBarBaz {foo bar baz}' cache: 'no-cache' mode: "same-origin" // good // Remember that `body` must be a JSON parsable string. Also, many GQL// servers will expect fields to be sent under a `body.query` property.// GQL variables can be sent under `body.variables`.const init = body: JSON credentials: 'include' mode: 'same-origin' // good // With a fully custom init object. Body must be a JSON parsable string// with a query property.const init = headers: 'Content-Type': 'application/json' 'Accept': 'application/json' body: JSON credentials: 'include' mode: 'same-origin' // good
Important note: If you add your own headers to the init object, the default headers will be overwritten. If this causes an issue, including these with your custom headers should resolve it:
'Content-Type': 'application/json' 'Accept': 'application/json'
Examples of broken SYNTAX
// No arguments // bad // No second argument // bad // An invalid second argument // bad // Empty strings // bad // Misconfigured init object (missing a body property) // bad // Misconfigured body property (did not use JSON.stringify()) // bad // if the first argument isn't an endpoint, nothing is fetched // bad // if the second argument is a string, but not a valid query string,// then the server won't be able to do anything with it // bad
API
Quick Reference
query(url: string, init: string | Object)
/** * Provides a thin, GQL-compliant wrapper over the Fetch API. * * SYNTAX: query(url, init) * @param * @param * @param * @param * // For additional valid arguments, see the Fetch API: * // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch * * Default init properties * @param * @param * * @returns */
mutation(url: string, init: string | Object)
Alias for query
.
Changelog
View it here
Contributing
Contributors
Thanks goes to these wonderful people:
Denny Temple |
Reynolds A Colon |
kamo31 |
marceca |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
Code of Conduct
Read our Code of Conduct here.
License
Free and Open Source under the MIT License.