Re-executing query with urql/svelte doesn't appear to do anything #3488

thelegendtubaguy · 2024-01-23T11:28:55Z

thelegendtubaguy
Jan 23, 2024

I have a SPA with SvelteKit that I'm trying to use urql with. One of my pages has a "create" button that fires off a mutation. This button is on the same page as the list of these objects. That seems like a pretty straight forward use case, but I cannot for the life of me get the query to rerun. Here's what I'm trying:
Client has devtoolsExchange, cacheExchange, retryExchange, and fetchExchange.

On my +page.svelte:

const gqlClient = getContextClient()

const connectionsQuery = gql`
query {
	listConnections {
		connections {
			id
			accountName
			service
			status
		}
		nextToken
	}
}
`

$: connections = queryStore({
  client: gqlClient,
  query: connectionsQuery
})

Inside my button handler on the same page, I have this:

creatingConnection = true
const createConnectionStore = mutationStore({
	client: gqlClient,
	query: gql`
		mutation ($authData: String!, $service: String!) {
			createConnection(authData: $authData, service: $service) {
				id
				accountName
				service
				status
				statusMessage
			}
		}
	`,
	variables: { authData: code, service }
})
createConnectionStore.subscribe((value) => {
	creatingConnection = value.fetching
	queryStore({
		client: gqlClient,
		query: connectionsQuery,
		requestPolicy: 'network-only'
	})
})

That connectionsQuery never runs a second time. I do not see it in devtools or network requests at all. How can I get that to rerun? I've tried setting the first time I run it to also have network-only but that did not help.

I have also tried changing the button click handler to look like this:

gqlClient
.mutation(
gql`
	mutation ($authData: String!, $service: String!) {
		createConnection(authData: $authData, service: $service) {
			id
			accountName
			service
			status
			statusMessage
		}
	}
`,
{
	authData: code,
	service
}
)
.toPromise()
.then((result) => {
    creatingConnection = false
    gqlClient.query(connectionsQuery, {}, { requestPolicy: 'network-only' })
})

The second query also does not run in this instance.

What am I doing wrong?

kitten · 2024-01-23T12:14:58Z

kitten
Jan 23, 2024
Maintainer

This is because neither the queryStore (in @urql/svelte) nor sources created by the Client directly (in @urql/core) perform any action until you use them.

Sources in urql operate under a concept of “laziness”, which you can actually directly compare to Observables concept of cold sources, i.e. cold Observables. This concept differentiates between “hot” sources and “cold” sources. In short, when we’re saying a source is cold or lazy, it doesn't actually perform any side-effects until there's a sink that’s subscribed to the source.

To put it practically, sources created by client.query(...) deliver multiple results and only are considered active and started once:

you call subscribe (until unsubscribed)
you call toPromise (until exactly one non-stale result is delivered)
or await them (until exactly one non-stale result is resolved)

On a side-note, triggering queries manually after mutations is a bit of an anti-pattern, so I'd consider looking into normal cache mechanisms to invalidate query results before doing this.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Re-executing query with urql/svelte doesn't appear to do anything #3488

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Re-executing query with urql/svelte doesn't appear to do anything #3488

Uh oh!

Uh oh!

thelegendtubaguy Jan 23, 2024

Replies: 1 comment

Uh oh!

kitten Jan 23, 2024 Maintainer

thelegendtubaguy
Jan 23, 2024

kitten
Jan 23, 2024
Maintainer