Any way to pause URQL query when using atomWithQuery?

[ricardovanh]

First off, great work on binding these two phenomenal libraries. Really excited to start using both in my projects.

There is one thing I need before I can switch my URQL useQuery usages over to atomWithQuery, and that is the pause functionality.

Some of my query variables aren't available when the component mounts so it would be nice if I get use the get function to check if the dependencies are available before firing the query to avoid the initial failing query. I tried every variation of config and dug through the Jotai and URQL docs and source code to try and find how to do this, but couldn't get it to skip the query if the variables aren't ready yet.

something like:

const dataAtom = atomWithQuery(
  (get) => ({
    query: 'query goes here...',
    variables: {
      someKey: get(asyncValueAtom)
    },
    pause: get(asyncValueAtom) === null
  }),
  () => client
)

I checked the implementation and it seems to only accept these config options:

{
  query: TypedDocumentNode<Data, Variables> | string
  variables?: Variables
  requestPolicy?: RequestPolicy
  context?: Partial<OperationContext>
}

Would also be really nice if we could also have the query re-run when other (not query variable atoms) get changed, like:

const dataAtom = atomWithQuery(
 (get) => ({
   query: 'query goes here...',
   variables: {
     someKey: get(asyncValueAtom)
   },
   pause: get(asyncValueAtom) === null,
   watch: [
     asyncValueAtom2,
     asyncValueAtom3
   ]
 }),
 () => client
)

^ but this would only be a really nice addition wishlist item 😄

Anyone have any advice how I can make the atomWithQuery query wait? I am pretty sure there might be a Jotai way to already achieve this that I can't think of right now.

[dai-shi]

Hi, very nice to see someone trying jotai/uqrl integration. Happy to help, but bear with me as I'm not super familiar with urql.

For a start, we discussed about something.
#463 (comment)
Let me know if that makes sense or not.

As far as I understand, the suggestion was:

const baseAtom = atomWithQuery(
  (get) => ({
    query: 'query goes here...',
    variables: {
      someKey: get(asyncValueAtom)
    },
  }),
  () => client
)

const dataAtom = atom((get) => get(asyncValueAtom) !== null && get(baseAtom))

The general idea is to follow useQuery use cases. I wonder if useQuery suspends (with <Suspense>) with pause?

[ricardovanh]

Awesome! Thanks for the very fast reply! The discussion around the pause makes sense, that might also solve the other suggestion I had since I could just listen for any other atom changes that I need.

Your suggestion seems to do the trick.

But since I rely on the way like the useAtom is destructed in the docs when using URQL:

const [{ data }] = useAtom(dataAtom);

I had to take care of the empty state. There might be a way to avoid needing to do this with async atoms and Suspense, but this will do for now:

const baseAtom = atomWithQuery(
  (get) => ({
    query: 'query goes here...',
    variables: {
      someKey: get(asyncValueAtom)
    },
  }),
  () => client
)

const dataAtom = atom((get) => get(asyncValueAtom) ? get(baseAtom) : { data: null })

function MyComponent() {
  const [{ data }] = useAtom(dataAtom);
}

^ just leaving this here as someone else is bound to have the same issue later on 😄

Thanks for the help, and thanks for Jotai!

[dai-shi]

const dataAtom = atom((get) => get(asyncValueAtom) ? get(baseAtom) : { data: null })

Yes, this is the whole point of the reason it's left out for developers. Atoms with atomWithQuery should suspend if there's no data, and it's only developers who can say they want null instead.

Good to hear that it worked. Feel free to give further/other questions/feedbacks.