SolidJS•6d ago

useParams not updating with urql's createQuery

Currently refactoring a svelte project to Solid. I'm unable to get params to update inside the createQuery() call when you change the dynamic path (ie same route but different fst), which uses urql's solid library. I've tried multiple different variations of making params reactive and none of them seem to work. As you can see in the svelte snippet there, I had to make it derived state so it would update, but the equivalent of const derivedParams = () => params doesn't seem to work. Any thoughts?

14 Replies

Brendonovich•6d ago

This will depend on how urql’s solid lib works, but you need to pass the value in a reactive manner, arm you’re just passing in the value at the time of execution. Try making the id field a getter Also I’d get rid of that signal you’re setting into, accessing params is reactive

quinnvaughnOP•6d ago

Uhh so that only sometimes works? I'm not sure if this is now some other part of my code failing

quinnvaughnOP•6d ago

(I removed some of the stuff because while not technically classified it's moderately sensitive haha)

Brendonovich•6d ago

It's hard to say, I'm not sure if that urql lib handles reactivity properly

quinnvaughnOP•6d ago

It doesn't seem like createQuery does, or at least I don't know how to? Because using just the regular client they provide does in a createAsync

Brendonovich•6d ago

Hmm it seems like the draft solid bindings for urql have a better implementation of createQuery that takes a function as an argument rather than a plain object

quinnvaughnOP•6d ago

Where are you seeing this?

Brendonovich•6d ago

https://github.com/urql-graphql/urql/pull/2527

GitHub

(DRAFT) SolidJS bindings by gksander · Pull Request #2527 · urql-gr...

This PR serves as a didactic to discuss the feasibility of solidjs bindings for urql. This branch contains initial prototypes for createQuery and createMutation methods that (attempt) to conform to...

Brendonovich•6d ago

though that pr was closed so rip

quinnvaughnOP•6d ago

Ah gotcha. Yeah I might just stick with using the client for now. Thanks though!

peerreynders•6d ago

FYI: Routes are passed RouteSectionProps:

import type { RouteSectionProps } from '@solidjs/router';

export default function Page(props: RouteSectionProps) {
  // …
}

import type { RouteSectionProps } from '@solidjs/router';

export default function Page(props: RouteSectionProps) {
  // …
}

As far as I'm aware: - props.params behaves exactly like the accessor returned by useParams - props.location behaves exactly like the accessor returned by useLocation (props.location.query behaves like the accessor returned from useSearchParams)

quinnvaughnOP•5d ago

The problem is there is no clear way to type props.params

export interface RouteSectionProps<T = unknown> {
  params: Params;
  location: Location;
  data: T;
  children?: JSX.Element;
}

export interface RouteSectionProps<T = unknown> {
  params: Params;
  location: Location;
  data: T;
  children?: JSX.Element;
}

peerreynders•5d ago

useParams just uses a type assertion https://github.com/solidjs/solid-router/blob/50c5d7bdef6acc5910c6eb35ba6a24b15aae3ef6/src/routing.ts#L194

GitHub

solid-router/src/routing.ts at 50c5d7bdef6acc5910c6eb35ba6a24b15aae...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

Documentation - Everyday Types

The language primitives.

quinnvaughnOP•5d ago

Yes I'm saying I can type useParams. As far as I'm aware there is not an easy way to do the same thing with prop.params? It didn't seem to me like you could specify types easily with mergeProps?

Gaming

Programming

useParams not updating with urql's createQuery

Did you find this page helpful?