Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saltyaom/gql
SaltyAom's lightweight graphql client
https://github.com/saltyaom/gql
Last synced: 27 days ago
JSON representation
SaltyAom's lightweight graphql client
- Host: GitHub
- URL: https://github.com/saltyaom/gql
- Owner: SaltyAom
- License: mit
- Created: 2021-08-11T18:38:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-03T17:58:17.000Z (over 2 years ago)
- Last Synced: 2024-10-10T20:53:15.537Z (about 1 month ago)
- Language: TypeScript
- Size: 85 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @saltyaom/gql
Lightweight graphql client.
## Feature
- No dependencies.
- Lightweight, just 1.4 KB.
- Run on both client and server.
- Just simple fetch.
- You can write plugins, eg.
- [@saltyaom/gql-inmemory-cache](https://github.com/saltyaom/gql-inmemory-cache)
- [@saltyaom/gql-local-cache](https://github.com/saltyaom/gql-local-cache)
- Built-in TypeScript
## Size
1.2 is around 1.4 KB, checkout [Bundlephobia](https://bundlephobia.com/package/@saltyaom/gql) for accurate result.
## Getting start
```bash
pnpm add @saltyaom/gql
```
## Example
```jsx
import gql, { client } from '@saltyaom/gql'
client.config('https://api.hifumin.app/graphql')
gql(
`query SaltyAomGQL($id: Int!) {
nhql {
by(id: $id) {
data {
id
title {
display
}
}
}
}
}`,
{
variables: {
id: 177013
}
}
```
## Why
Y'll made GraphQL too complex and heavy.
I just want to fetch GraphQL query here.
## Plugins
You can implement custom plugin for transforming data, caching, logging, etc.
- middlewares
- Executes before fetch
- Will receive (`operationName`, `variables`)
- If any callback return truthy value, the value will be used as result and skip the fetch
- Good for caching
- afterwares
- Executes after fetch
- Will receive (`data`, `operationName`, `variables`)
- Returning new data will cause data transformation for next afterware
- Good for logging, data-transformations.
### Example
```typescript
import gql, { client } from '@saltyaom/gql'
import LocalCache from '@saltyaom/gql-local-cache'
client.config(
'https://api.opener.studio/graphql',
{
plugins: [
LocalCache(),
// Or write your own plugins
{
afterwares: [
({ data, operationName, variables }) => {
console.log('Logger:', data, operationName, variables)
}
]
}
]
}
)
// You can pass generic if you're using TypeScript
gql(
`query SaltyAomGQL($id: Int!) {
nhql {
by(id: $id) {
data {
id
title {
display
}
}
}
}
}`,
{
variables: {
id: 177013
}
}
).then((data) => {
console.log(data)
})
```