T
TanStack•4y ago
ratty-blush

Using solid-query dependent on resources?

I'm super new to TanStack Query (and SolidJS) and I have a question! If I have an async resource on which I'd like to build a query on, as it can be mutated. Basically it's a WASM binding from which I can get some settings from and update the settings. Seems like a perfect fit for the library using queries and mutations, even though it's not a real network resource, but it behaves almost the same as a GET and POST. So, there's wasmResource which is a SolidJS resource wrapper around the wasm object. wasmResource.currentSettings is an async method which returns a JS object from C++ land once resolved. How would I go about creating a query for it? I've tried using: 
  const query = createQuery(
    () => ["settings"],
    () => wasmResource()?.currentSettings()
  );

  createEffect(() => {
    console.log(query);
  });
  const query = createQuery(
    () => ["settings"],
    () => wasmResource()?.currentSettings()
  );

  createEffect(() => {
    console.log(query);
  });
However I don't get any console logs. I guess that the query isn't reactive. I also get an error: 
Error: Query data cannot be undefined - affected query key: ["settings"]
    at Object.onSuccess (query.ts:456:13)
Error: Query data cannot be undefined - affected query key: ["settings"]
    at Object.onSuccess (query.ts:456:13)
However, If I place the query inside JSX, I also get the error message but it re-renders once I refocus the window and it refetches. 
      <div>{JSON.stringify(query.data)}</div>
      <div>{JSON.stringify(query.data)}</div>
1 Reply
eastern-cyan
eastern-cyan•4y ago
Hey there! So createQuery is expecting a non undefined value to be returned from the query function. I'm guessing when the query is mounted for the first time, wasmResource is undefined. Is the wasmResource a reactive solidjs signal? If it is, I recommend using the enabled option. For example 
const query = createQuery(
    () => ["settings"],
    () => wasmResource().currentSettings(), 
    {
       get enabled() {
         return wasmResource()
       }
    }
  );
const query = createQuery(
    () => ["settings"],
    () => wasmResource().currentSettings(), 
    {
       get enabled() {
         return wasmResource()
       }
    }
  );
This will cause the query not to run until wasmResource is defined (assuming wasmResource is a truthy value)

Did you find this page helpful?