Axios-based library used to request data from graphql (now with middlewares!)
MIT License
Axios-based library used to request data from graphql (now with middlewares!).
const request = Requester({
url: "https://countries.trevorblades.com/",
middlewares: [dedupe]
})
await countries = request("countries", `{
name
}`)
<...>
Example: /example/src/components/CountryList/index.js.
Requester
instanceFirstly you have to create Requester
instance, it receives object with three fields:
url
Basically, your graphql endpoint, e.g. https://countries.trevorblades.com/
options
Object of axios options for an axios instance, used, for example, if you need to pass specific header or something: { headers: { "X-Requested-With": "XMLHttpRequest"} }
.
middlewares
Array of middlewares, built-in or your own, more on them later.
import { Requester, dedupe } from "graphql-requester"
const request = Requester({
url: "https://countries.trevorblades.com/",
middlewares: [dedupe]
})
export default request
After that you're ready to call Requester
instance you've configured.
Instance with three parameters:
String. Used to name the query in requests tab of inspector. Also used in dedupe middleware in cacheKey, e.g. products
String. e.g:
products {
name
}
Object. For example dedupe
middleware uses multiple
one: { multiple: true }
graphql-requester
bundled with several middleware out of the box:
dataExtract
Extracts data from response object to work with it in the next promise chain.
errorExtract
Does the same with error.
dedupe
Deduplicates same requests for you, for example if you called same request several time and first call isn't finished, second call will be just the link to the first one and will not be called. But if you really need to place several calls in the same time you can pass multiple: true
to the options.
loader
Is a function which accepts object with two callbacks, onBefore
and onAfter
and returns middleware. Used to wrap all requests with some kind of global loader. For example:
const loaderMiddleware = loader({
onBefore: startLoader,
onAfter: endLoader
});
const request = Requester({
middlewares: [loaderMiddleware]
})
And after that your Requester
instance will always invoke that callback on before and after the call, but if you don't need to invoke it, you can pass { withLoader: false }
top options.
Each middleware receives ctx
as an first and only argument, it cointains such fields like:
call
Promise. An promise of the call which will be fired.
name
String. Name of the query, first argument of call of an instance.
query
String. Graphql query itself, second argument.
opts
Object. Call options, third argument.
cancelled
Boolean. If it will be mutated to false, chain of middlwares will be broken an call will fire right after.
preprocessors
Array of functions. Will be called in a sequence on a successful request, each of function receives resolved data modified by previous middleware and should return modified version of it.
errorHandlers
Array of functions. Basically the same as preprocessors
, but for errors. Will be called in a sequence on a failed request.
Definitions included.
import {
dataExtract,
loader, LoaderOpts,
dedupe, DedupeOpts,
} from "graphql-requester"
<...>
const request = Requester<LoaderOpts & DedupeOpts>({
middlewares: [ dedupe, dataExtract loaderMiddleware ]
})
MIT