@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 +23 -0
- package/README.md +89 -0
- package/context.d.ts +3 -0
- package/context.js +21 -0
- package/esm/context.js +14 -0
- package/esm/index.js +7 -0
- package/esm/provider.js +15 -0
- package/esm/use-constructive-client.js +16 -0
- package/esm/use-graphql-client.js +20 -0
- package/esm/use-introspection.js +41 -0
- package/esm/use-schema-meta.js +221 -0
- package/esm/use-table-rows.js +167 -0
- package/index.d.ts +7 -0
- package/index.js +23 -0
- package/package.json +44 -0
- package/provider.d.ts +5 -0
- package/provider.js +22 -0
- package/use-constructive-client.d.ts +2 -0
- package/use-constructive-client.js +19 -0
- package/use-graphql-client.d.ts +2 -0
- package/use-graphql-client.js +24 -0
- package/use-introspection.d.ts +130 -0
- package/use-introspection.js +44 -0
- package/use-schema-meta.d.ts +116 -0
- package/use-schema-meta.js +224 -0
- package/use-table-rows.d.ts +4 -0
- package/use-table-rows.js +173 -0
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
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
package/esm/provider.js
ADDED
|
@@ -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