mirror of
https://github.com/BradNut/gQuery
synced 2025-09-08 17:40:18 +00:00
updates readme
This commit is contained in:
parent
5d40d6a60e
commit
3ccfa34843
2 changed files with 12 additions and 65 deletions
64
README.md
64
README.md
|
|
@ -10,10 +10,6 @@ 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
|
||||
|
||||
```
|
||||
|
|
@ -26,7 +22,7 @@ export const g = new GFetch({
|
|||
|
||||
docs coming soon
|
||||
|
||||
### 3. Run GraphQL Codegen
|
||||
### 3. Add Codegen Config
|
||||
|
||||
docs coming soon
|
||||
|
||||
|
|
@ -55,64 +51,6 @@ docs coming soon
|
|||
|
||||
```
|
||||
|
||||
## 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?
|
||||
|
|
|
|||
13
src/index.ts
13
src/index.ts
|
|
@ -22,13 +22,22 @@ const newGCache = () => {
|
|||
|
||||
export const gCache = newGCache();
|
||||
|
||||
export async function gQuery(typename, { query, variables }) {
|
||||
interface CacheFunctionOptions {
|
||||
update?: boolean;
|
||||
}
|
||||
|
||||
export async function gQuery(
|
||||
typename,
|
||||
{ query, variables },
|
||||
{ update }: CacheFunctionOptions = {}
|
||||
) {
|
||||
const current = get(gCache);
|
||||
|
||||
// Extremely Naive cache
|
||||
// Just checks to see if the data is there, if it is, don't
|
||||
// Hit the network again
|
||||
if (!current?.[typename]) {
|
||||
// if update option is present, then we want to update the cache
|
||||
if (!current?.[typename] || update) {
|
||||
const newData = await query({
|
||||
variables,
|
||||
fetch,
|
||||
|
|
|
|||
Loading…
Reference in a new issue