Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Add `hasNext` to query-state (#3703)
authored by
Jovi De Croock
and committed by
GitHub
8c90e084
d43bbfb1
+79
-22
+9
.changeset/chatty-toes-melt.md
+9
.changeset/chatty-toes-melt.md
+1
packages/preact-urql/src/hooks/constants.ts
+1
packages/preact-urql/src/hooks/constants.ts
+3
packages/preact-urql/src/hooks/useMutation.ts
+3
packages/preact-urql/src/hooks/useMutation.ts
···
45
45
data?: Data;
46
46
/** The {@link OperationResult.error} for the executed mutation. */
47
47
error?: CombinedError;
48
+
/** The {@link OperationResult.hasNext} for the executed query. */
49
+
hasNext: boolean;
48
50
/** The {@link OperationResult.extensions} for the executed mutation. */
49
51
extensions?: Record<string, any>;
50
52
/** The {@link Operation} that the current state is for.
···
164
166
fetching: false,
165
167
stale: result.stale,
166
168
data: result.data,
169
+
hasNext: result.hasNext,
167
170
error: result.error,
168
171
extensions: result.extensions,
169
172
operation: result.operation,
+7
-3
packages/preact-urql/src/hooks/useQuery.ts
+7
-3
packages/preact-urql/src/hooks/useQuery.ts
···
137
137
* last `Operation` that the current state was for.
138
138
*/
139
139
operation?: Operation<Data, Variables>;
140
+
/** The {@link OperationResult.hasNext} for the executed query. */
141
+
hasNext: boolean;
140
142
}
141
143
142
144
/** Triggers {@link useQuery} to execute a new GraphQL query operation.
···
303
305
return pipe(
304
306
query$$,
305
307
switchMap(query$ => {
306
-
if (!query$) return fromValue({ fetching: false, stale: false });
308
+
if (!query$)
309
+
return fromValue({ fetching: false, stale: false, hasNext: false });
307
310
308
311
return concat([
309
312
// Initially set fetching to true
310
313
fromValue({ fetching: true, stale: false }),
311
314
pipe(
312
315
query$,
313
-
map(({ stale, data, error, extensions, operation }) => ({
316
+
map(({ stale, data, error, extensions, operation, hasNext }) => ({
314
317
fetching: false,
315
318
stale: !!stale,
319
+
hasNext,
316
320
data,
317
321
error,
318
322
operation,
···
320
324
}))
321
325
),
322
326
// When the source proactively closes, fetching is set to false
323
-
fromValue({ fetching: false, stale: false }),
327
+
fromValue({ fetching: false, stale: false, hasNext: false }),
324
328
]);
325
329
}),
326
330
// The individual partial results are merged into each previous result
+1
packages/preact-urql/src/hooks/useSubscription.test.tsx
+1
packages/preact-urql/src/hooks/useSubscription.test.tsx
+1
packages/react-urql/src/hooks/__snapshots__/useMutation.test.tsx.snap
+1
packages/react-urql/src/hooks/__snapshots__/useMutation.test.tsx.snap
+1
packages/react-urql/src/hooks/__snapshots__/useQuery.test.tsx.snap
+1
packages/react-urql/src/hooks/__snapshots__/useQuery.test.tsx.snap
+1
packages/react-urql/src/hooks/__snapshots__/useSubscription.test.tsx.snap
+1
packages/react-urql/src/hooks/__snapshots__/useSubscription.test.tsx.snap
+2
packages/react-urql/src/hooks/state.ts
+2
packages/react-urql/src/hooks/state.ts
···
3
3
export const initialState = {
4
4
fetching: false,
5
5
stale: false,
6
+
hasNext: false,
6
7
error: undefined,
7
8
data: undefined,
8
9
extensions: undefined,
···
38
39
interface Stateish {
39
40
data?: any;
40
41
error?: any;
42
+
hasNext: boolean;
41
43
fetching: boolean;
42
44
stale: boolean;
43
45
}
+3
packages/react-urql/src/hooks/useMutation.ts
+3
packages/react-urql/src/hooks/useMutation.ts
···
47
47
error?: CombinedError;
48
48
/** The {@link OperationResult.extensions} for the executed mutation. */
49
49
extensions?: Record<string, any>;
50
+
/** The {@link OperationResult.hasNext} for the executed query. */
51
+
hasNext: boolean;
50
52
/** The {@link Operation} that the current state is for.
51
53
*
52
54
* @remarks
···
167
169
error: result.error,
168
170
extensions: result.extensions,
169
171
operation: result.operation,
172
+
hasNext: result.hasNext,
170
173
});
171
174
}
172
175
}),
+2
packages/react-urql/src/hooks/useQuery.spec.ts
+2
packages/react-urql/src/hooks/useQuery.spec.ts
···
62
62
expect(state).toEqual({
63
63
fetching: true,
64
64
stale: false,
65
+
hasNext: false,
65
66
extensions: undefined,
66
67
error: undefined,
67
68
data: undefined,
···
126
127
fetching: false,
127
128
stale: false,
128
129
extensions: undefined,
130
+
hasNext: false,
129
131
error: 1,
130
132
data: 0,
131
133
});
+2
packages/react-urql/src/hooks/useQuery.ts
+2
packages/react-urql/src/hooks/useQuery.ts
···
125
125
data?: Data;
126
126
/** The {@link OperationResult.error} for the executed query. */
127
127
error?: CombinedError;
128
+
/** The {@link OperationResult.hasNext} for the executed query. */
129
+
hasNext: boolean;
128
130
/** The {@link OperationResult.extensions} for the executed query. */
129
131
extensions?: Record<string, any>;
130
132
/** The {@link Operation} that the current state is for.
+4
packages/solid-urql/src/createMutation.ts
+4
packages/solid-urql/src/createMutation.ts
···
44
44
* last `Operation` that the current state was for.
45
45
*/
46
46
operation?: Operation<Data, Variables>;
47
+
/** The {@link OperationResult.hasNext} for the executed query. */
48
+
hasNext: boolean;
47
49
};
48
50
49
51
/** Triggers {@link createMutation} to execute its GraphQL mutation operation.
···
140
142
const initialResult: CreateMutationState<Data, Variables> = {
141
143
operation: undefined,
142
144
fetching: false,
145
+
hasNext: false,
143
146
stale: false,
144
147
data: undefined,
145
148
error: undefined,
···
167
170
error: result.error,
168
171
extensions: result.extensions,
169
172
operation: result.operation,
173
+
hasNext: result.hasNext,
170
174
});
171
175
});
172
176
}),
+4
packages/solid-urql/src/createQuery.ts
+4
packages/solid-urql/src/createQuery.ts
···
234
234
produce(draft => {
235
235
draft.fetching = false;
236
236
draft.stale = false;
237
+
draft.hasNext = false;
237
238
})
238
239
);
239
240
···
244
245
produce(draft => {
245
246
draft.fetching = true;
246
247
draft.stale = false;
248
+
draft.hasNext = false;
247
249
})
248
250
);
249
251
···
255
257
produce(draft => {
256
258
draft.fetching = false;
257
259
draft.stale = false;
260
+
draft.hasNext = false;
258
261
})
259
262
);
260
263
}),
···
268
271
draft.error = res.error;
269
272
draft.operation = res.operation;
270
273
draft.extensions = res.extensions;
274
+
draft.hasNext = res.hasNext;
271
275
})
272
276
);
273
277
});
+2
-1
packages/svelte-urql/src/mutationStore.ts
+2
-1
packages/svelte-urql/src/mutationStore.ts
···
107
107
const subscription = pipe(
108
108
pipe(
109
109
args.client.executeRequestOperation(operation),
110
-
map(({ stale, data, error, extensions, operation }) => ({
110
+
map(({ stale, data, error, extensions, operation, hasNext }) => ({
111
111
fetching: false,
112
112
stale,
113
113
data,
114
114
error,
115
115
operation,
116
116
extensions,
117
+
hasNext,
117
118
}))
118
119
),
119
120
scan(
+20
-10
packages/svelte-urql/src/queryStore.ts
+20
-10
packages/svelte-urql/src/queryStore.ts
···
156
156
fromStore(operation$),
157
157
switchMap(operation => {
158
158
return concat<Partial<OperationResultState<Data, Variables>>>([
159
-
fromValue({ fetching: true, stale: false }),
159
+
fromValue({ fetching: true, stale: false, hasNext: false }),
160
160
pipe(
161
161
args.client.executeRequestOperation(operation),
162
-
map(({ stale, data, error, extensions, operation }) => ({
163
-
fetching: false,
164
-
stale: !!stale,
165
-
data,
166
-
error,
167
-
operation,
168
-
extensions,
169
-
}))
162
+
map(
163
+
({
164
+
stale,
165
+
data,
166
+
error,
167
+
extensions,
168
+
operation,
169
+
hasNext,
170
+
}) => ({
171
+
fetching: false,
172
+
stale: !!stale,
173
+
data,
174
+
error,
175
+
operation,
176
+
extensions,
177
+
hasNext,
178
+
})
179
+
)
170
180
),
171
-
fromValue({ fetching: false }),
181
+
fromValue({ fetching: false, hasNext: false }),
172
182
]);
173
183
})
174
184
);
+6
-4
packages/vue-urql/src/useMutation.ts
+6
-4
packages/vue-urql/src/useMutation.ts
···
57
57
* last `Operation` that the current state was for.
58
58
*/
59
59
operation: Ref<Operation<T, V> | undefined>;
60
+
/** The {@link OperationResult.hasNext} for the executed query. */
61
+
hasNext: Ref<boolean>;
60
62
/** Triggers {@link useMutation} to execute its GraphQL mutation operation.
61
63
*
62
64
* @param variables - variables using which the mutation will be executed.
···
135
137
): UseMutationResponse<T, V> {
136
138
const data: Ref<T | undefined> = shallowRef();
137
139
138
-
const { fetching, operation, extensions, stale, error } = useRequestState<
139
-
T,
140
-
V
141
-
>();
140
+
const { fetching, operation, extensions, stale, error, hasNext } =
141
+
useRequestState<T, V>();
142
142
143
143
return {
144
144
data,
···
147
147
error,
148
148
operation,
149
149
extensions,
150
+
hasNext,
150
151
executeMutation(
151
152
variables: V,
152
153
context?: Partial<OperationContext>
···
165
166
error.value = result.error;
166
167
operation.value = result.operation;
167
168
extensions.value = result.extensions;
169
+
hasNext.value = result.hasNext;
168
170
}),
169
171
filter(result => !result.hasNext),
170
172
take(1),
+8
-4
packages/vue-urql/src/useQuery.ts
+8
-4
packages/vue-urql/src/useQuery.ts
···
138
138
* documentation on the `pause` option.
139
139
*/
140
140
isPaused: Ref<boolean>;
141
+
/** The {@link OperationResult.hasNext} for the executed query. */
142
+
hasNext: Ref<boolean>;
141
143
/** Resumes {@link useQuery} if it’s currently paused.
142
144
*
143
145
* @remarks
···
241
243
): UseQueryResponse<T, V> {
242
244
const data: Ref<T | undefined> = shallowRef();
243
245
244
-
const { fetching, operation, extensions, stale, error } = useRequestState<
245
-
T,
246
-
V
247
-
>();
246
+
const { fetching, operation, extensions, stale, error, hasNext } =
247
+
useRequestState<T, V>();
248
248
249
249
const { isPaused, source, pause, resume, execute, teardown } = useClientState(
250
250
args,
···
264
264
onEnd(() => {
265
265
fetching.value = false;
266
266
stale.value = false;
267
+
hasNext.value = false;
267
268
}),
268
269
subscribe(res => {
269
270
data.value = res.data;
···
272
273
error.value = res.error;
273
274
operation.value = res.operation;
274
275
extensions.value = res.extensions;
276
+
hasNext.value = res.hasNext;
275
277
})
276
278
).unsubscribe
277
279
);
278
280
} else {
279
281
fetching.value = false;
280
282
stale.value = false;
283
+
hasNext.value = false;
281
284
}
282
285
},
283
286
{
···
321
324
extensions,
322
325
fetching,
323
326
isPaused,
327
+
hasNext,
324
328
pause,
325
329
resume,
326
330
executeQuery(opts?: Partial<OperationContext>): UseQueryResponse<T, V> {
+2
packages/vue-urql/src/utils.ts
+2
packages/vue-urql/src/utils.ts
···
90
90
T = any,
91
91
V extends AnyVariables = AnyVariables,
92
92
>() => {
93
+
const hasNext: Ref<boolean> = ref(false);
93
94
const stale: Ref<boolean> = ref(false);
94
95
const fetching: Ref<boolean> = ref(false);
95
96
const error: Ref<CombinedError | undefined> = shallowRef();
96
97
const operation: Ref<Operation<T, V> | undefined> = shallowRef();
97
98
const extensions: Ref<Record<string, any> | undefined> = shallowRef();
98
99
return {
100
+
hasNext,
99
101
stale,
100
102
fetching,
101
103
error,