Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
update svelte example to @urql/svelte2 (#2461)
authored by
Jovi De Croock
and committed by
GitHub
5bb6d3b9
dbcc7382
+15
-14
+3
-3
examples/with-svelte/package.json
+3
-3
examples/with-svelte/package.json
···
8
8
"serve": "vite preview"
9
9
},
10
10
"devDependencies": {
11
-
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.9",
11
+
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.44",
12
12
"vite": "^2.2.4"
13
13
},
14
14
"dependencies": {
15
-
"@urql/svelte": "^1.2.3",
16
-
"svelte": "^3.38.2"
15
+
"@urql/svelte": "^2.0.0",
16
+
"svelte": "^3.48.0"
17
17
}
18
18
}
+3
-3
examples/with-svelte/src/App.svelte
+3
-3
examples/with-svelte/src/App.svelte
···
1
1
<script>
2
-
import { initClient } from "@urql/svelte";
2
+
import { setContextClient, createClient } from "@urql/svelte";
3
3
import PokemonList from "./PokemonList.svelte";
4
4
5
-
initClient({
5
+
setContextClient(createClient({
6
6
url: "https://trygql.formidable.dev/graphql/basic-pokedex"
7
-
});
7
+
}));
8
8
</script>
9
9
10
10
<PokemonList />
+9
-8
examples/with-svelte/src/PokemonList.svelte
+9
-8
examples/with-svelte/src/PokemonList.svelte
···
1
1
<script>
2
-
import { gql, operationStore, query } from "@urql/svelte";
2
+
import { getContextClient, gql, queryStore } from "@urql/svelte";
3
3
4
-
const pokemons = operationStore(
5
-
gql`
4
+
let skip = 0;
5
+
$: pokemons = queryStore({
6
+
client: getContextClient(),
7
+
query: gql`
6
8
query ($skip: Int!) {
7
9
pokemons(limit: 10, skip: $skip) {
8
10
id
···
10
12
}
11
13
}
12
14
`,
13
-
{ skip: 0 }
14
-
);
15
-
16
-
query(pokemons);
15
+
variables: { skip },
16
+
requestPolicy: 'cache-and-network'
17
+
});
17
18
18
19
function nextPage() {
19
-
$pokemons.variables = { skip: $pokemons.variables.skip + 10 };
20
+
skip = skip + 10;
20
21
}
21
22
</script>
22
23