mirror of
https://github.com/BradNut/gQuery
synced 2025-09-08 17:40:18 +00:00
128 lines
2.7 KiB
Markdown
128 lines
2.7 KiB
Markdown
|
|
|
|
# qQuery
|
|
|
|
## Not like jQuery. A GraphQL Fetcher & Cache for Svelte Kit
|
|
|
|
### UnderConstruction.gif
|
|
|
|
More information in this space soon. API is very much in flux rn.
|
|
|
|
### Preview
|
|
|
|
## 🪄 Magic Mode
|
|
|
|
Magic mode is the preferred way of using gQuery. Not because it's magical, but because it's easy.
|
|
|
|
### 1. Initialize G
|
|
|
|
```
|
|
export const g = new GFetch({
|
|
path: Environment.apiURL //whatever your api url is here
|
|
})
|
|
```
|
|
|
|
### 2. Add GraphQL Codegen Plugin
|
|
|
|
docs coming soon
|
|
|
|
### 3. Run GraphQL Codegen
|
|
|
|
docs coming soon
|
|
|
|
### 4. Use that thang
|
|
|
|
```
|
|
<script context="module" lang="ts">
|
|
// The generated function that fetches and caches
|
|
import { getSeriesList } from '../whatever'
|
|
|
|
export async function load() {
|
|
// Runs the cache/fetch function populating $gCache before use.
|
|
await getSeriesList({
|
|
limit: 0
|
|
})
|
|
return {}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
// Cache becomes populated with data available for SSR
|
|
import { gCache } from '@leveluptuts/gQuery'
|
|
|
|
// $: console.log($gCache.seriesList)
|
|
</script>
|
|
|
|
```
|
|
|
|
## Manual Mode
|
|
|
|
I guess if you want to do it this way you can.
|
|
|
|
### 1. Initialize
|
|
|
|
```
|
|
export const g = new GFetch({
|
|
path: Environment.apiURL
|
|
})
|
|
```
|
|
|
|
### 2. Create Fetch Function
|
|
|
|
This is a function that run a gFetch. A gFetch is a simple graphql fetcher that accepts an array of queries and variables.
|
|
The result of this function is your data. If you don't want the caching, you can just use this data directly.
|
|
|
|
```
|
|
const seriesList = ({ variables}) =>
|
|
g.fetch({
|
|
queries: [{ query: SeriesListDoc, variables }],
|
|
})
|
|
|
|
```
|
|
|
|
### 3. Cache and Fetch (optional)
|
|
|
|
If you want the caching into `$gCache`, you can pass your fetch func into the cacher and send the data to $gcache instead of using it directly.
|
|
Pass gQuery the query name, the fetch function and any variables you might have.
|
|
|
|
```
|
|
async function getSeriesList(variables) {
|
|
await gQuery('seriesList', { query: seriesList, variables })
|
|
}
|
|
```
|
|
|
|
### 4. Use in Svelte Kit App
|
|
|
|
```
|
|
<script context="module" lang="ts">
|
|
import { getSeriesList } from '../whatever'
|
|
|
|
export async function load() {
|
|
await getSeriesList({
|
|
limit: 0
|
|
})
|
|
return {}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { gCache } from '@leveluptuts/gQuery'
|
|
|
|
// $: console.log($gCache.seriesList)
|
|
</script>
|
|
|
|
```
|
|
|
|
## FAQ / WTF
|
|
|
|
### Q? How tf do I update the cache?
|
|
|
|
It's a Svelte Writable Store. So after a mutation you can quickly and easily manually update the cache.
|
|
|
|
### Q? Can't you update the cache magically for me after a mutation?
|
|
|
|
Maybe? If you want to be in charge of writing that bit, the door is open 😼
|
|
|
|
### Q? Why can't I use this yet?
|
|
|
|
It's changing too much rn, but will be available asap. Trust me, the sooner I get this done the better.
|