From 8fc8847ed313954e7468efba211f47ceca7cd499 Mon Sep 17 00:00:00 2001
From: Felix <krumm-felix@adornis.de>
Date: Thu, 27 Feb 2025 11:03:23 +0000
Subject: [PATCH 1/2] fix!: useQuery called the query multiple times
---
lab/functional-lit/README.md | 6 ++--
lab/functional-lit/use-query.ts | 51 +++++++++++++--------------------
2 files changed, 23 insertions(+), 34 deletions(-)
diff --git a/lab/functional-lit/README.md b/lab/functional-lit/README.md
index 3069384b54..815bfb50fb 100644
--- a/lab/functional-lit/README.md
+++ b/lab/functional-lit/README.md
@@ -204,14 +204,14 @@ import { from } from 'rxjs';
const DataComponent = webcomponent(() => {
// From Promise
- const { loading, value, error } = useQuery(fetch('/api/data').then(r => r.json()));
+ const { loading, value, error } = useQuery(() => fetch('/api/data').then(r => r.json()));
// From Observable
- const { value: rxjsValue } = useQuery(from([1, 2, 3]));
+ const { value: rxjsValue } = useQuery(() => from([1, 2, 3]));
// From Signal
const dataSignal = signal('initial');
- const { value: signalValue } = useQuery(dataSignal);
+ const { value: signalValue } = useQuery(() => dataSignal);
if (loading) return html`<div>Loading...</div>`;
if (error) return html`<div>Error: ${error.message}</div>`;
diff --git a/lab/functional-lit/use-query.ts b/lab/functional-lit/use-query.ts
index 2f6898e5ed..8216deb617 100644
--- a/lab/functional-lit/use-query.ts
+++ b/lab/functional-lit/use-query.ts
@@ -2,58 +2,47 @@ import { Signal } from '@lit-labs/preact-signals';
import { Observable } from 'rxjs';
import { useEffect, useState } from './stateful.js';
-export const useQuery = <T>(source: Observable<T> | Promise<T> | Signal<T>, deps?: any[]) => {
- const [loading, setLoading] = useState(true);
- const [value, setValue] = useState(undefined as T | null);
- const [error, setError] = useState(null as Error | null);
+export const useQuery = <T>(source: () => Observable<T> | Promise<T> | Signal<T>, deps?: any[]) => {
+ const [queryState, setQueryState] = useState({
+ loading: true,
+ value: undefined as T | null,
+ error: null as Error | null,
+ });
useEffect(() => {
- if (source instanceof Observable) {
- const subscription = source.subscribe({
+ const sourceResolved = source();
+ if (sourceResolved instanceof Observable) {
+ const subscription = sourceResolved.subscribe({
next: v => {
- setValue(v);
- setLoading(false);
- setError(null);
+ setQueryState({ loading: false, value: v, error: null });
},
error: e => {
- setError(e);
- setLoading(false);
- setError(null);
+ setQueryState({ loading: false, value: null, error: e });
},
- complete: () => setLoading(false),
+ complete: () => setQueryState({ ...queryState, loading: false }),
});
return () => subscription.unsubscribe();
}
- if (source instanceof Promise) {
- source
+ if (sourceResolved instanceof Promise) {
+ sourceResolved
.then(value => {
- setLoading(false);
- setValue(value);
- setError(null);
+ setQueryState({ value, error: null, loading: false });
})
.catch(error => {
- setError(error);
- setLoading(false);
- setValue(null);
+ setQueryState({ value: null, error, loading: false });
});
}
- if (source instanceof Signal) {
- const subscription = source.subscribe(value => {
- setLoading(false);
- setValue(value);
- setError(null);
+ if (sourceResolved instanceof Signal) {
+ const subscription = sourceResolved.subscribe(value => {
+ setQueryState({ value, error: null, loading: false });
});
return () => subscription();
}
}, deps ?? []);
- return {
- value,
- loading,
- error,
- };
+ return queryState;
};
--
GitLab
From fc0536629b9f4b77fdc3ed5a683271942dbe10e9 Mon Sep 17 00:00:00 2001
From: Felix <krumm-felix@adornis.de>
Date: Thu, 27 Feb 2025 11:04:11 +0000
Subject: [PATCH 2/2] chore: ported engine packages to new useQuery
---
lab/introspect/client/x-introspect-viewer-node.ts | 2 +-
lab/introspect/client/x-introspect-viewer.ts | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/lab/introspect/client/x-introspect-viewer-node.ts b/lab/introspect/client/x-introspect-viewer-node.ts
index cffe305ffd..cfeb75ea1b 100644
--- a/lab/introspect/client/x-introspect-viewer-node.ts
+++ b/lab/introspect/client/x-introspect-viewer-node.ts
@@ -54,7 +54,7 @@ const genBlacklist = (data: Maybe<AdornisEntity>) => {
export const IntrospectViewerNodeID = stateful(({ nodeID }: { nodeID?: string }) => {
const introspectionNode = useQuery(
- nodeID ? getIntrospectNodeByID(nodeID)(selectionSet(() => IntrospectNode, 1)) : of(null),
+ () => (nodeID ? getIntrospectNodeByID(nodeID)(selectionSet(() => IntrospectNode, 1)) : of(null)),
[nodeID],
);
diff --git a/lab/introspect/client/x-introspect-viewer.ts b/lab/introspect/client/x-introspect-viewer.ts
index 1a0e306f31..0671e3cdde 100644
--- a/lab/introspect/client/x-introspect-viewer.ts
+++ b/lab/introspect/client/x-introspect-viewer.ts
@@ -104,7 +104,8 @@ export class XIntrospectViewer extends ChemistryLitElement {
html`
${stateful(() => {
const introspectionNode = useQuery(
- childID ? getIntrospectNodeByID(childID)(selectionSet(() => IntrospectNode, 1)) : of(null),
+ () =>
+ childID ? getIntrospectNodeByID(childID)(selectionSet(() => IntrospectNode, 1)) : of(null),
[childID],
);
--
GitLab