@drizzle-graphql-suite/query 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/index.js +1 -172
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,30 @@
|
|
|
1
1
|
# @drizzle-graphql-suite/query
|
|
2
2
|
|
|
3
|
+
> Part of [`drizzle-graphql-suite`](https://github.com/annexare/drizzle-graphql-suite).
|
|
4
|
+
> See also: [`schema`](https://github.com/annexare/drizzle-graphql-suite/tree/main/packages/schema) | [`client`](https://github.com/annexare/drizzle-graphql-suite/tree/main/packages/client)
|
|
5
|
+
|
|
3
6
|
TanStack React Query hooks for `drizzle-graphql-suite/client` — type-safe data fetching with caching, pagination, and mutations.
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
bun add @drizzle-graphql-suite/query
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @drizzle-graphql-suite/query
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Or install the full suite:
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
bun add drizzle-graphql-suite
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install drizzle-graphql-suite
|
|
26
|
+
```
|
|
27
|
+
|
|
5
28
|
## Setup
|
|
6
29
|
|
|
7
30
|
### Provider
|
package/index.js
CHANGED
|
@@ -1,172 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { createContext, useContext } from "react";
|
|
3
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
4
|
-
"use client";
|
|
5
|
-
var GraphQLClientContext = createContext(null);
|
|
6
|
-
function GraphQLProvider({
|
|
7
|
-
client,
|
|
8
|
-
children
|
|
9
|
-
}) {
|
|
10
|
-
return /* @__PURE__ */ jsxDEV(GraphQLClientContext.Provider, {
|
|
11
|
-
value: client,
|
|
12
|
-
children
|
|
13
|
-
}, undefined, false, undefined, this);
|
|
14
|
-
}
|
|
15
|
-
function useGraphQLClient() {
|
|
16
|
-
const client = useContext(GraphQLClientContext);
|
|
17
|
-
if (!client) {
|
|
18
|
-
throw new Error("useGraphQLClient must be used within a <GraphQLProvider>");
|
|
19
|
-
}
|
|
20
|
-
return client;
|
|
21
|
-
}
|
|
22
|
-
// src/useEntity.ts
|
|
23
|
-
import { useMemo } from "react";
|
|
24
|
-
function useEntity(entityName) {
|
|
25
|
-
const client = useGraphQLClient();
|
|
26
|
-
return useMemo(() => client.entity(entityName), [client, entityName]);
|
|
27
|
-
}
|
|
28
|
-
// src/useEntityInfiniteQuery.ts
|
|
29
|
-
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
30
|
-
function useEntityInfiniteQuery(entity, params, options) {
|
|
31
|
-
const queryKey = options?.queryKey ?? [
|
|
32
|
-
"gql",
|
|
33
|
-
"infinite",
|
|
34
|
-
params.select,
|
|
35
|
-
params.where,
|
|
36
|
-
params.orderBy,
|
|
37
|
-
params.pageSize
|
|
38
|
-
];
|
|
39
|
-
return useInfiniteQuery({
|
|
40
|
-
queryKey,
|
|
41
|
-
initialPageParam: 0,
|
|
42
|
-
queryFn: async ({ pageParam = 0 }) => {
|
|
43
|
-
const queryParams = {
|
|
44
|
-
...params,
|
|
45
|
-
limit: params.pageSize,
|
|
46
|
-
offset: pageParam * params.pageSize
|
|
47
|
-
};
|
|
48
|
-
const items = await entity.query(queryParams);
|
|
49
|
-
const count = await entity.count({ where: params.where });
|
|
50
|
-
return {
|
|
51
|
-
items,
|
|
52
|
-
count
|
|
53
|
-
};
|
|
54
|
-
},
|
|
55
|
-
getNextPageParam: (lastPage, allPages) => {
|
|
56
|
-
const totalFetched = allPages.length * params.pageSize;
|
|
57
|
-
return totalFetched < lastPage.count ? allPages.length : undefined;
|
|
58
|
-
},
|
|
59
|
-
enabled: options?.enabled,
|
|
60
|
-
gcTime: options?.gcTime,
|
|
61
|
-
staleTime: options?.staleTime
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
// src/useEntityList.ts
|
|
65
|
-
import { useQuery } from "@tanstack/react-query";
|
|
66
|
-
function useEntityList(entity, params, options) {
|
|
67
|
-
const queryKey = options?.queryKey ?? [
|
|
68
|
-
"gql",
|
|
69
|
-
"list",
|
|
70
|
-
params.select,
|
|
71
|
-
params.where,
|
|
72
|
-
params.orderBy,
|
|
73
|
-
params.limit,
|
|
74
|
-
params.offset
|
|
75
|
-
];
|
|
76
|
-
return useQuery({
|
|
77
|
-
queryKey,
|
|
78
|
-
queryFn: async () => {
|
|
79
|
-
return await entity.query(params);
|
|
80
|
-
},
|
|
81
|
-
enabled: options?.enabled,
|
|
82
|
-
gcTime: options?.gcTime,
|
|
83
|
-
staleTime: options?.staleTime,
|
|
84
|
-
refetchOnWindowFocus: options?.refetchOnWindowFocus
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
// src/useEntityMutation.ts
|
|
88
|
-
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
89
|
-
function useEntityInsert(entity, returning, options) {
|
|
90
|
-
const queryClient = useQueryClient();
|
|
91
|
-
const shouldInvalidate = options?.invalidate !== false;
|
|
92
|
-
return useMutation({
|
|
93
|
-
mutationFn: async (params) => {
|
|
94
|
-
return await entity.insert({ ...params, returning });
|
|
95
|
-
},
|
|
96
|
-
onSuccess: (data) => {
|
|
97
|
-
if (shouldInvalidate) {
|
|
98
|
-
const key = options?.invalidateKey ?? ["gql"];
|
|
99
|
-
queryClient.invalidateQueries({ queryKey: key });
|
|
100
|
-
}
|
|
101
|
-
options?.onSuccess?.(data);
|
|
102
|
-
},
|
|
103
|
-
onError: options?.onError
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
function useEntityUpdate(entity, returning, options) {
|
|
107
|
-
const queryClient = useQueryClient();
|
|
108
|
-
const shouldInvalidate = options?.invalidate !== false;
|
|
109
|
-
return useMutation({
|
|
110
|
-
mutationFn: async (params) => {
|
|
111
|
-
return await entity.update({ ...params, returning });
|
|
112
|
-
},
|
|
113
|
-
onSuccess: (data) => {
|
|
114
|
-
if (shouldInvalidate) {
|
|
115
|
-
const key = options?.invalidateKey ?? ["gql"];
|
|
116
|
-
queryClient.invalidateQueries({ queryKey: key });
|
|
117
|
-
}
|
|
118
|
-
options?.onSuccess?.(data);
|
|
119
|
-
},
|
|
120
|
-
onError: options?.onError
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
function useEntityDelete(entity, returning, options) {
|
|
124
|
-
const queryClient = useQueryClient();
|
|
125
|
-
const shouldInvalidate = options?.invalidate !== false;
|
|
126
|
-
return useMutation({
|
|
127
|
-
mutationFn: async (params) => {
|
|
128
|
-
return await entity.delete({ ...params, returning });
|
|
129
|
-
},
|
|
130
|
-
onSuccess: (data) => {
|
|
131
|
-
if (shouldInvalidate) {
|
|
132
|
-
const key = options?.invalidateKey ?? ["gql"];
|
|
133
|
-
queryClient.invalidateQueries({ queryKey: key });
|
|
134
|
-
}
|
|
135
|
-
options?.onSuccess?.(data);
|
|
136
|
-
},
|
|
137
|
-
onError: options?.onError
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
// src/useEntityQuery.ts
|
|
141
|
-
import { useQuery as useQuery2 } from "@tanstack/react-query";
|
|
142
|
-
function useEntityQuery(entity, params, options) {
|
|
143
|
-
const queryKey = options?.queryKey ?? [
|
|
144
|
-
"gql",
|
|
145
|
-
"single",
|
|
146
|
-
params.select,
|
|
147
|
-
params.where,
|
|
148
|
-
params.orderBy,
|
|
149
|
-
params.offset
|
|
150
|
-
];
|
|
151
|
-
return useQuery2({
|
|
152
|
-
queryKey,
|
|
153
|
-
queryFn: async () => {
|
|
154
|
-
return await entity.querySingle(params);
|
|
155
|
-
},
|
|
156
|
-
enabled: options?.enabled,
|
|
157
|
-
gcTime: options?.gcTime,
|
|
158
|
-
staleTime: options?.staleTime,
|
|
159
|
-
refetchOnWindowFocus: options?.refetchOnWindowFocus
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
export {
|
|
163
|
-
useGraphQLClient,
|
|
164
|
-
useEntityUpdate,
|
|
165
|
-
useEntityQuery,
|
|
166
|
-
useEntityList,
|
|
167
|
-
useEntityInsert,
|
|
168
|
-
useEntityInfiniteQuery,
|
|
169
|
-
useEntityDelete,
|
|
170
|
-
useEntity,
|
|
171
|
-
GraphQLProvider
|
|
172
|
-
};
|
|
1
|
+
import{createContext as O,useContext as R}from"react";import{jsx as T}from"react/jsx-runtime";var H=O(null);function S({client:E,children:f}){return T(H.Provider,{value:E,children:f})}function B(){let E=R(H);if(!E)throw Error("useGraphQLClient must be used within a <GraphQLProvider>");return E}import{useMemo as V}from"react";function W(E){let f=B();return V(()=>f.entity(E),[f,E])}import{useInfiniteQuery as X}from"@tanstack/react-query";function Y(E,f,D){let U=D?.queryKey??["gql","infinite",f.select,f.where,f.orderBy,f.pageSize];return X({queryKey:U,initialPageParam:0,queryFn:async({pageParam:w=0})=>{let L={...f,limit:f.pageSize,offset:w*f.pageSize},z=await E.query(L),J=await E.count({where:f.where});return{items:z,count:J}},getNextPageParam:(w,L)=>{return L.length*f.pageSize<w.count?L.length:void 0},enabled:D?.enabled,gcTime:D?.gcTime,staleTime:D?.staleTime})}import{useQuery as Z}from"@tanstack/react-query";function _(E,f,D){let U=D?.queryKey??["gql","list",f.select,f.where,f.orderBy,f.limit,f.offset];return Z({queryKey:U,queryFn:async()=>{return await E.query(f)},enabled:D?.enabled,gcTime:D?.gcTime,staleTime:D?.staleTime,refetchOnWindowFocus:D?.refetchOnWindowFocus})}import{useMutation as F,useQueryClient as G}from"@tanstack/react-query";function $(E,f,D){let U=G(),w=D?.invalidate!==!1;return F({mutationFn:async(L)=>{return await E.insert({...L,returning:f})},onSuccess:(L)=>{if(w){let z=D?.invalidateKey??["gql"];U.invalidateQueries({queryKey:z})}D?.onSuccess?.(L)},onError:D?.onError})}function j(E,f,D){let U=G(),w=D?.invalidate!==!1;return F({mutationFn:async(L)=>{return await E.update({...L,returning:f})},onSuccess:(L)=>{if(w){let z=D?.invalidateKey??["gql"];U.invalidateQueries({queryKey:z})}D?.onSuccess?.(L)},onError:D?.onError})}function I(E,f,D){let U=G(),w=D?.invalidate!==!1;return F({mutationFn:async(L)=>{return await E.delete({...L,returning:f})},onSuccess:(L)=>{if(w){let z=D?.invalidateKey??["gql"];U.invalidateQueries({queryKey:z})}D?.onSuccess?.(L)},onError:D?.onError})}import{useQuery as K}from"@tanstack/react-query";function v(E,f,D){let U=D?.queryKey??["gql","single",f.select,f.where,f.orderBy,f.offset];return K({queryKey:U,queryFn:async()=>{return await E.querySingle(f)},enabled:D?.enabled,gcTime:D?.gcTime,staleTime:D?.staleTime,refetchOnWindowFocus:D?.refetchOnWindowFocus})}export{B as useGraphQLClient,j as useEntityUpdate,v as useEntityQuery,_ as useEntityList,$ as useEntityInsert,Y as useEntityInfiniteQuery,I as useEntityDelete,W as useEntity,S as GraphQLProvider};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drizzle-graphql-suite/query",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "React Query hooks for the Drizzle GraphQL client with caching and automatic invalidation",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "https://github.com/dmythro",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@drizzle-graphql-suite/client": ">=0.
|
|
35
|
+
"@drizzle-graphql-suite/client": ">=0.7.0",
|
|
36
36
|
"@tanstack/react-query": ">=5.0.0",
|
|
37
37
|
"react": ">=18.0.0"
|
|
38
38
|
}
|