Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
feat(svelte): add first class reexecute to svelte (#3472)
Co-authored-by: Phil Pluckthun <phil@kitten.sh>
authored by
Jovi De Croock
Phil Pluckthun
and committed by
GitHub
5b6449e6
3df80f30
+48
-19
+5
.changeset/seven-toys-applaud.md
+5
.changeset/seven-toys-applaud.md
+1
-3
docs/basics/svelte.md
+1
-3
docs/basics/svelte.md
+5
examples/with-svelte/src/PokemonList.svelte
+5
examples/with-svelte/src/PokemonList.svelte
···
19
19
function nextPage() {
20
20
skip = skip + 10;
21
21
}
22
+
23
+
function reexcute() {
24
+
pokemons.reexecute({ requestPolicy: 'network-only' })
25
+
}
22
26
</script>
23
27
24
28
<div>
···
34
38
</ul>
35
39
{/if}
36
40
<button on:click={nextPage}>Next Page</button>
41
+
<button on:click={reexcute}>Reexec</button>
37
42
</div>
+37
-16
packages/svelte-urql/src/queryStore.ts
+37
-16
packages/svelte-urql/src/queryStore.ts
···
119
119
Variables extends AnyVariables = AnyVariables,
120
120
>(
121
121
args: QueryArgs<Data, Variables>
122
-
): OperationResultStore<Data, Variables> & Pausable {
122
+
): OperationResultStore<Data, Variables> &
123
+
Pausable & { reexecute: (context: Partial<OperationContext>) => void } {
123
124
const request = createRequest(args.query, args.variables as Variables);
124
125
125
126
const context: Partial<OperationContext> = {
···
132
133
request,
133
134
context
134
135
);
136
+
137
+
const operation$ = writable(operation);
138
+
135
139
const initialState: OperationResultState<Data, Variables> = {
136
140
...initialResult,
137
141
operation,
···
148
152
return never as any;
149
153
}
150
154
151
-
return concat<Partial<OperationResultState<Data, Variables>>>([
152
-
fromValue({ fetching: true, stale: false }),
153
-
pipe(
154
-
args.client.executeRequestOperation(operation),
155
-
map(({ stale, data, error, extensions, operation }) => ({
156
-
fetching: false,
157
-
stale: !!stale,
158
-
data,
159
-
error,
160
-
operation,
161
-
extensions,
162
-
}))
163
-
),
164
-
fromValue({ fetching: false }),
165
-
]);
155
+
return pipe(
156
+
fromStore(operation$),
157
+
switchMap(operation => {
158
+
return concat<Partial<OperationResultState<Data, Variables>>>([
159
+
fromValue({ fetching: true, stale: false }),
160
+
pipe(
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
+
}))
170
+
),
171
+
fromValue({ fetching: false }),
172
+
]);
173
+
})
174
+
);
166
175
}
167
176
),
168
177
scan(
···
178
187
).unsubscribe;
179
188
});
180
189
190
+
const reexecute = (context: Partial<OperationContext>) => {
191
+
const newContext = { ...context, ...args.context };
192
+
const operation = args.client.createRequestOperation(
193
+
'query',
194
+
request,
195
+
newContext
196
+
);
197
+
isPaused$.set(false);
198
+
operation$.set(operation);
199
+
};
200
+
181
201
return {
182
202
...derived(result$, (result, set) => {
183
203
set(result);
184
204
}),
185
205
...createPausable(isPaused$),
206
+
reexecute,
186
207
};
187
208
}