Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yoonit-labs/javascript-yoonit-utils
Couple of functions in JS to speed up development and give some help
https://github.com/yoonit-labs/javascript-yoonit-utils
graphql hacktoberfest javascript tools
Last synced: 7 days ago
JSON representation
Couple of functions in JS to speed up development and give some help
- Host: GitHub
- URL: https://github.com/yoonit-labs/javascript-yoonit-utils
- Owner: Yoonit-Labs
- License: mit
- Created: 2021-03-02T21:26:43.000Z (over 3 years ago)
- Default Branch: development
- Last Pushed: 2023-03-05T22:16:38.000Z (over 1 year ago)
- Last Synced: 2024-08-08T15:28:47.527Z (3 months ago)
- Topics: graphql, hacktoberfest, javascript, tools
- Language: JavaScript
- Homepage:
- Size: 3.19 MB
- Stars: 27
- Watchers: 3
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Yoonit Utils
#### Couple of functions in JS to speed up development and give some help with:
- A GraphQl Query Builder
- A GraphQl Mutation Builder
## Table Of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Query Builder](#query-builder)
* [Mutation Builder](#mutation-builder)
* [Advanced Usage](#advanced-usage)
* [Using for real](#using-it-for-real)
* [Contribute](#to-contribute-and-make-it-better)
## Installation
```javascript
npm i -s @yoonit/utils
```
## Usage
We used a functional technique called currying at the main constructor function, this means that we pass a subset of arguments and each function returns a function that uses the next subset of arguments.
The first parameters is a string and its the the endpoint name (such as 'getUsers'), it returns the function that uses the next parameter, the arguments object. This function will build the arguments body for your query/mutation and will return another function. This third function uses the third parameter you need to pass, the expected response fields. This will build the response filds and will return you query/mutation ready to use.
You can use the builders without a arguments object, but you need to pass the endpoint name and the response fields, otherwise it will return false and a warning.
Parameters:
- Endpoint Name e.g., 'getUsers'
- Object parameters e.g., '{ value: 'value' }'
- Expected response fields e.g, 'status', 'message'
### Query Builder
```javascript
import { graphql } from '@yoonit/utils'
const query = graphql.query('getUsers')({ value: 'value', valueTwo: 123 })('status', 'message', 'messageTwo')
```
Output
```
query {
getUsers (
value: "value",
valueTwo: 123,
){
status,
message,
messageTwo
}
}
```
### Mutation Builder
```javascript
import { graphql } from '@yoonit/utils'
const mutation = graphql.mutation('createUser')(name: 'Mutation', surname: 'Builder')('status', 'message')
```
Output
```
mutation {
createUser (
name: "Mutation",
surname: "Builder"
){
status,
message
}
}
```
## Advanced Usage
Our builders also suports nested response fields and arrays on arguments object, see beelow how to use it:
```javascript
import { graphql } from '@yoonit/utils'
const mutation = graphql.mutation('createUser')({ value: ['value', '123', 'John Doe']})('status', 'message', { 'messageTwo': ['messageTitle', 'messageBody', { 'messageAlt': 'test' }, { 'messageAtt': ['att1', 'att2'] }]})
```
Output
```
mutation {
createUser (
value: [
'value',
'123',
'John Doe'
],
){
status,
message,
messageTwo {
messageTitle,
messageBody,
messageAlt {
test
},
messageAtt {
att1,
att2
}
}
}
}
```
## Using it for real
You can use it with js fetch or any other HTTP client you like.
See below how to use it with Fetch
```javascript
import { graphql } from '@yoonit/utils'
const body = graphql.mutation('createUser')({value: ['value', '123', 'John Doe'] })('status', 'message', { 'messageTwo': ['messageTitle', 'messageBody', { 'messageAlt': 'test' }, { 'messageAtt': ['att1', 'att2'] }]})
fetch('http://yourapi:5000', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body // Use the builder response here, as your body :)
})
})
```
## To contribute and make it better
Clone the repo, change what you want and send PR.
For commit messages we use Conventional Commits.
Contributions are always welcome!
[
](https://github.com/Yoonit-Labs/javascript-yoonit-utils/graphs/contributors)
---
Code with ❤ by the [**Yoonit**](https://yoonit.dev/) Team
