@constructive-io/graphql-react 2.14.10

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/LICENSE ADDED
@@ -0,0 +1,23 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2025 Dan Lynch <pyramation@gmail.com>
4
+ Copyright (c) 2025 Constructive <developers@constructive.io>
5
+ Copyright (c) 2020-present, Interweb, Inc.
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ of this software and associated documentation files (the "Software"), to deal
9
+ in the Software without restriction, including without limitation the rights
10
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ copies of the Software, and to permit persons to whom the Software is
12
+ furnished to do so, subject to the following conditions:
13
+
14
+ The above copyright notice and this permission notice shall be included in all
15
+ copies or substantial portions of the Software.
16
+
17
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,89 @@
1
+ # @constructive-io/graphql-react
2
+
3
+ <p align="center" width="100%">
4
+ <img height="250" src="https://raw.githubusercontent.com/constructive-io/constructive/refs/heads/main/assets/outline-logo.svg" />
5
+ </p>
6
+
7
+ <p align="center" width="100%">
8
+ <a href="https://github.com/constructive-io/constructive/actions/workflows/run-tests.yaml">
9
+ <img height="20" src="https://github.com/constructive-io/constructive/actions/workflows/run-tests.yaml/badge.svg" />
10
+ </a>
11
+ <a href="https://github.com/constructive-io/constructive/blob/main/LICENSE"><img height="20" src="https://img.shields.io/badge/license-MIT-blue.svg"/></a>
12
+ <a href="https://www.npmjs.com/package/@constructive-io/graphql-react"><img height="20" src="https://img.shields.io/github/package-json/v/constructive-io/constructive?filename=packages%2Freact%2Fpackage.json"/></a>
13
+ </p>
14
+
15
+ ---
16
+
17
+ ## Education and Tutorials
18
+
19
+ 1. 🚀 [Quickstart: Getting Up and Running](https://constructive.io/learn/quickstart)
20
+ Get started with modular databases in minutes. Install prerequisites and deploy your first module.
21
+
22
+ 2. 📦 [Modular PostgreSQL Development with Database Packages](https://constructive.io/learn/modular-postgres)
23
+ Learn to organize PostgreSQL projects with pgpm workspaces and reusable database modules.
24
+
25
+ 3. ✏️ [Authoring Database Changes](https://constructive.io/learn/authoring-database-changes)
26
+ Master the workflow for adding, organizing, and managing database changes with pgpm.
27
+
28
+ 4. 🧪 [End-to-End PostgreSQL Testing with TypeScript](https://constructive.io/learn/e2e-postgres-testing)
29
+ Master end-to-end PostgreSQL testing with ephemeral databases, RLS testing, and CI/CD automation.
30
+
31
+ 5. ⚡ [Supabase Testing](https://constructive.io/learn/supabase)
32
+ Use TypeScript-first tools to test Supabase projects with realistic RLS, policies, and auth contexts.
33
+
34
+ 6. 💧 [Drizzle ORM Testing](https://constructive.io/learn/drizzle-testing)
35
+ Run full-stack tests with Drizzle ORM, including database setup, teardown, and RLS enforcement.
36
+
37
+ 7. 🔧 [Troubleshooting](https://constructive.io/learn/troubleshooting)
38
+ Common issues and solutions for pgpm, PostgreSQL, and testing.
39
+
40
+ ## Related Constructive Tooling
41
+
42
+ ### 🧪 Testing
43
+
44
+ * [pgsql-test](https://github.com/constructive-io/constructive/tree/main/postgres/pgsql-test): **📊 Isolated testing environments** with per-test transaction rollbacks—ideal for integration tests, complex migrations, and RLS simulation.
45
+ * [supabase-test](https://github.com/constructive-io/constructive/tree/main/postgres/supabase-test): **🧪 Supabase-native test harness** preconfigured for the local Supabase stack—per-test rollbacks, JWT/role context helpers, and CI/GitHub Actions ready.
46
+ * [graphile-test](https://github.com/constructive-io/constructive/tree/main/graphile/graphile-test): **🔐 Authentication mocking** for Graphile-focused test helpers and emulating row-level security contexts.
47
+ * [pg-query-context](https://github.com/constructive-io/constructive/tree/main/postgres/pg-query-context): **🔒 Session context injection** to add session-local context (e.g., `SET LOCAL`) into queries—ideal for setting `role`, `jwt.claims`, and other session settings.
48
+
49
+ ### 🧠 Parsing & AST
50
+
51
+ * [pgsql-parser](https://www.npmjs.com/package/pgsql-parser): **🔄 SQL conversion engine** that interprets and converts PostgreSQL syntax.
52
+ * [libpg-query-node](https://www.npmjs.com/package/libpg-query): **🌉 Node.js bindings** for `libpg_query`, converting SQL into parse trees.
53
+ * [pg-proto-parser](https://www.npmjs.com/package/pg-proto-parser): **📦 Protobuf parser** for parsing PostgreSQL Protocol Buffers definitions to generate TypeScript interfaces, utility functions, and JSON mappings for enums.
54
+ * [@pgsql/enums](https://www.npmjs.com/package/@pgsql/enums): **🏷️ TypeScript enums** for PostgreSQL AST for safe and ergonomic parsing logic.
55
+ * [@pgsql/types](https://www.npmjs.com/package/@pgsql/types): **📝 Type definitions** for PostgreSQL AST nodes in TypeScript.
56
+ * [@pgsql/utils](https://www.npmjs.com/package/@pgsql/utils): **🛠️ AST utilities** for constructing and transforming PostgreSQL syntax trees.
57
+ * [pg-ast](https://www.npmjs.com/package/pg-ast): **🔍 Low-level AST tools** and transformations for Postgres query structures.
58
+
59
+ ### 🚀 API & Dev Tools
60
+
61
+ * [@constructive-io/graphql-server](https://github.com/constructive-io/constructive/tree/main/graphql/server): **⚡ Express-based API server** powered by PostGraphile to expose a secure, scalable GraphQL API over your Postgres database.
62
+ * [@constructive-io/graphql-explorer](https://github.com/constructive-io/constructive/tree/main/graphql/explorer): **🔎 Visual API explorer** with GraphiQL for browsing across all databases and schemas—useful for debugging, documentation, and API prototyping.
63
+
64
+ ### 🔁 Streaming & Uploads
65
+
66
+ * [etag-hash](https://github.com/constructive-io/constructive/tree/main/streaming/etag-hash): **🏷️ S3-compatible ETags** created by streaming and hashing file uploads in chunks.
67
+ * [etag-stream](https://github.com/constructive-io/constructive/tree/main/streaming/etag-stream): **🔄 ETag computation** via Node stream transformer during upload or transfer.
68
+ * [uuid-hash](https://github.com/constructive-io/constructive/tree/main/streaming/uuid-hash): **🆔 Deterministic UUIDs** generated from hashed content, great for deduplication and asset referencing.
69
+ * [uuid-stream](https://github.com/constructive-io/constructive/tree/main/streaming/uuid-stream): **🌊 Streaming UUID generation** based on piped file content—ideal for upload pipelines.
70
+ * [@constructive-io/s3-streamer](https://github.com/constructive-io/constructive/tree/main/streaming/s3-streamer): **📤 Direct S3 streaming** for large files with support for metadata injection and content validation.
71
+ * [@constructive-io/upload-names](https://github.com/constructive-io/constructive/tree/main/streaming/upload-names): **📂 Collision-resistant filenames** utility for structured and unique file names for uploads.
72
+
73
+ ### 🧰 CLI & Codegen
74
+
75
+ * [pgpm](https://github.com/constructive-io/constructive/tree/main/pgpm/pgpm): **🖥️ PostgreSQL Package Manager** for modular Postgres development. Works with database workspaces, scaffolding, migrations, seeding, and installing database packages.
76
+ * [@constructive-io/cli](https://github.com/constructive-io/constructive/tree/main/packages/cli): **🖥️ Command-line toolkit** for managing Constructive projects—supports database scaffolding, migrations, seeding, code generation, and automation.
77
+ * [@constructive-io/graphql-codegen](https://github.com/constructive-io/constructive/tree/main/graphql/codegen): **✨ GraphQL code generation** (types, operations, SDK) from schema/endpoint introspection.
78
+ * [@constructive-io/query-builder](https://github.com/constructive-io/constructive/tree/main/packages/query-builder): **🏗️ SQL constructor** providing a robust TypeScript-based query builder for dynamic generation of `SELECT`, `INSERT`, `UPDATE`, `DELETE`, and stored procedure calls—supports advanced SQL features like `JOIN`, `GROUP BY`, and schema-qualified queries.
79
+ * [@constructive-io/graphql-query](https://github.com/constructive-io/constructive/tree/main/graphql/query): **🧩 Fluent GraphQL builder** for PostGraphile schemas. ⚡ Schema-aware via introspection, 🧩 composable and ergonomic for building deeply nested queries.
80
+
81
+ ## Credits
82
+
83
+ **🛠 Built by the [Constructive](https://constructive.io) team — creators of modular Postgres tooling for secure, composable backends. If you like our work, contribute on [GitHub](https://github.com/constructive-io).**
84
+
85
+ ## Disclaimer
86
+
87
+ AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED "AS IS", AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
88
+
89
+ No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.
package/context.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const useReactNative: boolean;
2
+ export declare function getLqlContext(): any;
3
+ export { getLqlContext as resetLqlContext };
package/context.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.useReactNative = void 0;
7
+ exports.getLqlContext = getLqlContext;
8
+ exports.resetLqlContext = getLqlContext;
9
+ const react_1 = __importDefault(require("react"));
10
+ exports.useReactNative = typeof WeakMap === 'function' &&
11
+ !(typeof navigator === 'object' && navigator.product === 'ReactNative');
12
+ const cache = new (exports.useReactNative ? WeakMap : Map)();
13
+ function getLqlContext() {
14
+ let context = cache.get(react_1.default.createContext);
15
+ if (!context) {
16
+ context = react_1.default.createContext({});
17
+ context.displayName = 'LqlContext';
18
+ cache.set(react_1.default.createContext, context);
19
+ }
20
+ return context;
21
+ }
package/esm/context.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ export const useReactNative = typeof WeakMap === 'function' &&
3
+ !(typeof navigator === 'object' && navigator.product === 'ReactNative');
4
+ const cache = new (useReactNative ? WeakMap : Map)();
5
+ export function getLqlContext() {
6
+ let context = cache.get(React.createContext);
7
+ if (!context) {
8
+ context = React.createContext({});
9
+ context.displayName = 'LqlContext';
10
+ cache.set(React.createContext, context);
11
+ }
12
+ return context;
13
+ }
14
+ export { getLqlContext as resetLqlContext };
package/esm/index.js ADDED
@@ -0,0 +1,7 @@
1
+ export * from './use-graphql-client';
2
+ export * from './use-constructive-client';
3
+ export * from './use-introspection';
4
+ export * from './use-schema-meta';
5
+ export * from './use-table-rows';
6
+ export * from './provider';
7
+ export * from './context';
@@ -0,0 +1,15 @@
1
+ // @ts-nocheck
2
+ import React from 'react';
3
+ import { getLqlContext } from './context';
4
+ export const LqlProvider = ({ endpointUrl, children }) => {
5
+ const LqlContext = getLqlContext();
6
+ return (React.createElement(LqlContext.Consumer, null, (context = {}) => {
7
+ if (endpointUrl && context.endpointUrl !== endpointUrl) {
8
+ context = Object.assign({}, context, { endpointUrl });
9
+ }
10
+ if (!context.endpointUrl) {
11
+ throw new Error('LqlProvider was not passed endpointUrl: ' + JSON.stringify(context));
12
+ }
13
+ return (React.createElement(LqlContext.Provider, { value: context }, children));
14
+ }));
15
+ };
@@ -0,0 +1,16 @@
1
+ import { useMemo } from 'react';
2
+ import { QueryBuilder, MetaObject } from '@constructive-io/graphql-query';
3
+ import { useIntrospection } from './use-introspection';
4
+ import { useSchemaMeta } from './use-schema-meta';
5
+ export function useConstructiveQuery() {
6
+ const introspection = useIntrospection();
7
+ const meta = useSchemaMeta();
8
+ return useMemo(() => {
9
+ if (!meta.data || !introspection.data)
10
+ return null;
11
+ return new QueryBuilder({
12
+ meta: MetaObject.convertFromMetaSchema({ _meta: meta.data }),
13
+ introspection: introspection.data
14
+ });
15
+ }, [introspection.data, meta.data]);
16
+ }
@@ -0,0 +1,20 @@
1
+ // @ts-nocheck
2
+ import { useState, useMemo, useContext } from 'react';
3
+ import { GraphQLClient } from 'graphql-request';
4
+ import { getLqlContext } from './context';
5
+ export const useGraphqlClient = () => {
6
+ const [endpointUrl, setEndpointUrl] = useState(null);
7
+ const [headers, setHeaders] = useState({});
8
+ const context = useContext(getLqlContext());
9
+ if (!context || !context.endpointUrl) {
10
+ throw new Error('Missing LqlProvider');
11
+ }
12
+ if (endpointUrl != context.endpointUrl) {
13
+ setEndpointUrl(context.endpointUrl);
14
+ }
15
+ if (JSON.stringify(headers) != JSON.stringify(context.headers)) {
16
+ setHeaders(context.headers);
17
+ }
18
+ const graphqlClient = useMemo(() => (endpointUrl ? new GraphQLClient(endpointUrl, { headers }) : null), [headers, endpointUrl]);
19
+ return graphqlClient;
20
+ };
@@ -0,0 +1,41 @@
1
+ import { useEffect } from 'react';
2
+ import { useQuery } from 'react-query';
3
+ // @ts-ignore
4
+ import { IntrospectionQuery, parseGraphQuery } from 'introspectron';
5
+ import { useGraphqlClient } from './use-graphql-client';
6
+ const noop = () => { };
7
+ export function useIntrospection(options = {}) {
8
+ // @ts-ignore
9
+ const { headers, onSuccess = noop, onError = noop, ...restOptions } = options;
10
+ const graphqlClient = useGraphqlClient();
11
+ useEffect(() => {
12
+ if (headers && graphqlClient) {
13
+ graphqlClient.setHeaders(headers);
14
+ }
15
+ }, [graphqlClient, headers]);
16
+ const { refetch, ...rest } = useQuery('introspection', async () => {
17
+ const introspectionResults = await graphqlClient.request(IntrospectionQuery);
18
+ try {
19
+ const { queries, mutations } = parseGraphQuery(introspectionResults);
20
+ return { ...queries, ...mutations };
21
+ }
22
+ catch (err) {
23
+ throw new Error('useIntrospection: failed to get introspection query');
24
+ }
25
+ }, {
26
+ onError,
27
+ onSuccess,
28
+ ...restOptions,
29
+ // The query will not execute until the graphqlClient exists
30
+ enabled: !!graphqlClient,
31
+ // SQL schema rarely changes, so we don't want it to invalidate too often
32
+ refetchInterval: false,
33
+ refetchIntervalInBackground: false,
34
+ refetchOnMount: false,
35
+ refetchOnWindowFocus: false
36
+ });
37
+ return {
38
+ refetch,
39
+ ...rest
40
+ };
41
+ }
@@ -0,0 +1,221 @@
1
+ // @ts-nocheck
2
+ import { useEffect } from 'react';
3
+ import { gql } from 'graphql-request';
4
+ import { useQuery } from 'react-query';
5
+ import { useGraphqlClient } from './use-graphql-client';
6
+ const fieldFragment = `
7
+ name
8
+ type {
9
+ gqlType
10
+ isArray
11
+ modifier
12
+ pgAlias
13
+ pgType
14
+ subtype
15
+ typmod
16
+ }
17
+ `;
18
+ const queryFragment = `
19
+ query {
20
+ all
21
+ create
22
+ delete
23
+ one
24
+ update
25
+ }
26
+ `;
27
+ const primaryConstraintsFragment = `
28
+ primaryKeyConstraints {
29
+ name
30
+ fields {
31
+ ${fieldFragment}
32
+ }
33
+ }
34
+ `;
35
+ const foreignKeyConstraintsFragments = `
36
+ foreignKeyConstraints {
37
+ name
38
+ fields {
39
+ ${fieldFragment}
40
+ }
41
+ refFields {
42
+ ${fieldFragment}
43
+ }
44
+ refTable {
45
+ name
46
+ }
47
+ }
48
+ `;
49
+ const inflectionFragment = `
50
+ inflection {
51
+ allRows
52
+ allRowsSimple
53
+ conditionType
54
+ connection
55
+ createField
56
+ createInputType
57
+ createPayloadType
58
+ deleteByPrimaryKey
59
+ deletePayloadType
60
+ edge
61
+ edgeField
62
+ enumType
63
+ filterType
64
+ inputType
65
+ orderByType
66
+ patchField
67
+ patchType
68
+ tableFieldName
69
+ tableType
70
+ typeName
71
+ updateByPrimaryKey
72
+ updatePayloadType
73
+ }
74
+ `;
75
+ const metaQuery = gql `
76
+ query SchemaMetaQuery {
77
+ _meta {
78
+ tables {
79
+ name
80
+ ${queryFragment}
81
+
82
+ ${inflectionFragment}
83
+
84
+ fields {
85
+ ${fieldFragment}
86
+ }
87
+
88
+ ${primaryConstraintsFragment}
89
+
90
+ ${foreignKeyConstraintsFragments}
91
+
92
+ uniqueConstraints {
93
+ name
94
+ fields {
95
+ ${fieldFragment}
96
+ }
97
+ }
98
+
99
+ relations {
100
+ belongsTo {
101
+ fieldName
102
+ isUnique
103
+ type
104
+ keys {
105
+ ${fieldFragment}
106
+ }
107
+ references {
108
+ name
109
+ fields {
110
+ ${fieldFragment}
111
+ }
112
+ }
113
+ }
114
+ has {
115
+ fieldName
116
+ isUnique
117
+ type
118
+ keys {
119
+ ${fieldFragment}
120
+ }
121
+ referencedBy {
122
+ name
123
+ fields {
124
+ ${fieldFragment}
125
+ }
126
+ ${primaryConstraintsFragment}
127
+ ${foreignKeyConstraintsFragments}
128
+ }
129
+ }
130
+ hasMany {
131
+ fieldName
132
+ isUnique
133
+ type
134
+ keys {
135
+ ${fieldFragment}
136
+ }
137
+ referencedBy {
138
+ name
139
+ fields {
140
+ ${fieldFragment}
141
+ }
142
+ ${primaryConstraintsFragment}
143
+ ${foreignKeyConstraintsFragments}
144
+ }
145
+ }
146
+ hasOne {
147
+ fieldName
148
+ isUnique
149
+ type
150
+ keys {
151
+ ${fieldFragment}
152
+ }
153
+ referencedBy {
154
+ name
155
+ fields {
156
+ ${fieldFragment}
157
+ }
158
+ ${primaryConstraintsFragment}
159
+ ${foreignKeyConstraintsFragments}
160
+ }
161
+ }
162
+ manyToMany {
163
+ fieldName
164
+ type
165
+ leftKeyAttributes {
166
+ ${fieldFragment}
167
+ }
168
+ rightKeyAttributes {
169
+ ${fieldFragment}
170
+ }
171
+ junctionTable {
172
+ name
173
+ fields {
174
+ ${fieldFragment}
175
+ }
176
+ ${queryFragment}
177
+ ${primaryConstraintsFragment}
178
+ ${foreignKeyConstraintsFragments}
179
+ }
180
+ rightTable {
181
+ name
182
+ fields {
183
+ ${fieldFragment}
184
+ }
185
+ ${queryFragment}
186
+ ${primaryConstraintsFragment}
187
+ ${foreignKeyConstraintsFragments}
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ }
194
+ `;
195
+ export function useSchemaMeta({ tableName, onSuccess, onError, headers, ...restOptions } = {}) {
196
+ const graphqlClient = useGraphqlClient();
197
+ useEffect(() => {
198
+ if (headers && graphqlClient) {
199
+ graphqlClient.setHeaders(headers);
200
+ }
201
+ }, [graphqlClient, headers]);
202
+ const { data, refetch, ...otherProps } = useQuery('schemaMeta', async () => {
203
+ return await graphqlClient.request(metaQuery);
204
+ }, {
205
+ onError,
206
+ onSuccess,
207
+ ...restOptions,
208
+ // The query will not execute until the graphqlClient exists
209
+ enabled: !!graphqlClient,
210
+ // SQL schema rarely changes, so we don't want it to invalidate too often
211
+ refetchInterval: false,
212
+ refetchIntervalInBackground: false,
213
+ refetchOnMount: false,
214
+ refetchOnWindowFocus: false
215
+ });
216
+ return {
217
+ ...otherProps,
218
+ refetch,
219
+ data: tableName ? data?._meta?.tables[tableName] : data?._meta
220
+ };
221
+ }
@@ -0,0 +1,167 @@
1
+ // @ts-nocheck
2
+ import { useMemo } from 'react';
3
+ import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from 'react-query';
4
+ import { useGraphqlClient } from './use-graphql-client';
5
+ import { useConstructiveQuery } from './use-constructive-client';
6
+ const noop = () => { };
7
+ export function useTableRowsPaginated(options = {}) {
8
+ const { tableName, first, after, last, before, condition, filter, orderBy, onSuccess = noop, onError, skip = false, select, ...restOptions } = options;
9
+ const graphqlClient = useGraphqlClient();
10
+ const queryBuilder = useConstructiveQuery();
11
+ const graphqlQuery = useMemo(() => {
12
+ if (!queryBuilder)
13
+ return null;
14
+ const result = queryBuilder.query(tableName).getMany({ select }).print();
15
+ return {
16
+ hash: result._hash,
17
+ key: result._key
18
+ };
19
+ }, [queryBuilder, select, tableName]);
20
+ const params = useMemo(() => ({
21
+ skip,
22
+ first,
23
+ after,
24
+ last,
25
+ before,
26
+ condition,
27
+ filter,
28
+ orderBy,
29
+ graphqlQuery
30
+ }), [after, before, condition, filter, first, graphqlQuery, last, orderBy, skip]);
31
+ const query = useQuery([tableName, params], async ({ queryKey }) => {
32
+ const [, params] = queryKey;
33
+ const { skip, first, last, after, before, condition, filter, orderBy, graphqlQuery } = normalize(params);
34
+ if (skip || !graphqlQuery)
35
+ return null;
36
+ const result = await graphqlClient.request(graphqlQuery.hash, {
37
+ first,
38
+ last,
39
+ after,
40
+ before,
41
+ condition,
42
+ filter,
43
+ orderBy
44
+ });
45
+ return result[graphqlQuery.key];
46
+ }, {
47
+ onError,
48
+ onSuccess,
49
+ enabled: !!graphqlClient && !!graphqlQuery,
50
+ ...restOptions
51
+ // Read more what this does at:
52
+ // https://react-query.tanstack.com/guides/paginated-queries#better-paginated-queries-with-keeppreviousdata
53
+ // keepPreviousData: true
54
+ });
55
+ return query;
56
+ }
57
+ export function useTableRowsInfinite(options = {}) {
58
+ const { tableName, condition, filter, orderBy, onSuccess = noop, onError, select, ...restOptions } = options;
59
+ const graphqlClient = useGraphqlClient();
60
+ const queryBuilder = useConstructiveQuery();
61
+ const graphqlQuery = useMemo(() => {
62
+ if (!queryBuilder)
63
+ return null;
64
+ const result = queryBuilder.query(tableName).getMany({ select }).print();
65
+ return {
66
+ hash: result._hash,
67
+ key: result._key
68
+ };
69
+ }, [queryBuilder, select, tableName]);
70
+ const params = useMemo(() => ({
71
+ graphqlQuery,
72
+ condition,
73
+ filter,
74
+ orderBy
75
+ }), [condition, filter, graphqlQuery, orderBy]);
76
+ const infiniteQuery = useInfiniteQuery([tableName, params], async ({ queryKey, pageParam = null }) => {
77
+ const [, params] = queryKey;
78
+ const { condition, filter, orderBy, graphqlQuery } = normalize(params);
79
+ if (!graphqlQuery)
80
+ return null;
81
+ const result = await graphqlClient.request(graphqlQuery.hash, {
82
+ first: 50,
83
+ after: pageParam,
84
+ condition,
85
+ filter,
86
+ orderBy
87
+ });
88
+ return result[graphqlQuery.key];
89
+ }, {
90
+ onError,
91
+ onSuccess,
92
+ enabled: !!graphqlClient && !!graphqlQuery,
93
+ getNextPageParam: (lastPage) => lastPage.pageInfo.endCursor,
94
+ ...restOptions
95
+ });
96
+ return infiniteQuery;
97
+ }
98
+ export function useCreateTableRow(options = {}) {
99
+ const { tableName, onSuccess, onError } = options;
100
+ const queryClient = useQueryClient();
101
+ const graphqlClient = useGraphqlClient();
102
+ const queryBuilder = useConstructiveQuery();
103
+ const graphqlMutation = useMemo(() => {
104
+ if (!queryBuilder)
105
+ return null;
106
+ const result = queryBuilder.query(tableName).create().print();
107
+ return {
108
+ hash: result._hash,
109
+ key: result._key
110
+ };
111
+ }, [queryBuilder, tableName]);
112
+ const mutation = useMutation(async (variables) => {
113
+ const result = await graphqlClient.request(graphqlMutation.hash, variables);
114
+ return result[graphqlMutation.key];
115
+ }, {
116
+ onSuccess: (...args) => {
117
+ // Will invalidate every query that has query key starting with tableName
118
+ // ex: ['Action'] and ['Action', params] will both be invalidated
119
+ queryClient.invalidateQueries(tableName);
120
+ if (typeof onSuccess === 'function')
121
+ onSuccess(args);
122
+ },
123
+ onError
124
+ });
125
+ return mutation;
126
+ }
127
+ export function useDeleteTableRow(options = {}) {
128
+ const { tableName, onSuccess, onError } = options;
129
+ const queryClient = useQueryClient();
130
+ const graphqlClient = useGraphqlClient();
131
+ const queryBuilder = useConstructiveQuery();
132
+ const graphqlMutation = useMemo(() => {
133
+ if (!queryBuilder)
134
+ return null;
135
+ const result = queryBuilder.query(tableName).delete().print();
136
+ return {
137
+ hash: result._hash,
138
+ key: result._key
139
+ };
140
+ }, [queryBuilder, tableName]);
141
+ const mutation = useMutation(async (variables) => {
142
+ const result = await graphqlClient.request(graphqlMutation.hash, variables);
143
+ return result[graphqlMutation.key];
144
+ }, {
145
+ onSuccess: (...args) => {
146
+ // Will invalidate every query that has query key starting with tableName
147
+ // ex: ['Action'] and ['Action', params] will both be invalidated
148
+ queryClient.invalidateQueries(tableName);
149
+ if (typeof onSuccess === 'function')
150
+ onSuccess(args);
151
+ },
152
+ onError
153
+ });
154
+ return mutation;
155
+ }
156
+ function normalize(params) {
157
+ return {
158
+ ...params,
159
+ after: params.after ? String(params.after) : null,
160
+ before: params.before ? String(params.before) : null,
161
+ first: isValidPageSize(params.first) ? undefined : Number(params.first),
162
+ last: isValidPageSize(params.last) ? undefined : Number(params.last)
163
+ };
164
+ }
165
+ function isValidPageSize(size) {
166
+ return isNaN(size) || size == null;
167
+ }
package/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export * from './use-graphql-client';
2
+ export * from './use-constructive-client';
3
+ export * from './use-introspection';
4
+ export * from './use-schema-meta';
5
+ export * from './use-table-rows';
6
+ export * from './provider';
7
+ export * from './context';