Frameworkless examples

[jordmantheman]

Hello and I hope this finds you well,

Are there examples of making queries from the client in a framework-less way? I'm writing a module that is attempting provide business logic to a bunch of products by not taking on any framework dependencies.

https://github.com/nanostores/nanostores is an interesting project that solves this elegantly for stores. It's the store solution for Astro.

I was hoping to use a combination of the two libraries, using tanstack-query to simplify fetching, caching, etc and nanostores to manage storage reactivity in the app.

I'd like to open up a discussion to see if I'm going to run into gremlins, prior to marching down this path. And also I can update this thread with my findings.

Cheers,
Jordan

[TkDodo]

what do you mean with framework-less, like without react/vue/solid/svelte?

If that's the case, you're looking for @tanstack/query-core on npm

[jordmantheman]

Yup, that's exactly what I'm looking for. I'll give it a spin and see how it goes. Was looking though the examples and noticed they were all framework based, which gave me pause.

…

On Fri, Mar 17, 2023, 11:39 AM Dominik Dorfmeister ***@***.***> wrote: what do you mean with framework-less, like without react/vue/solid/svelte? If that's the case, you're looking for @tanstack/query-core on npm — Reply to this email directly, view it on GitHub <#5152 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC36KMVK5KX26F4MLI3JBKDW4SHSZANCNFSM6AAAAAAV6XLZXE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jordmantheman]

I'd like to share a small example I wrote integrating nanostores and the query-core.
Although nanostores offers a direct alternative, I find TanStack more compelling.

import {atom, onMount } from 'nanostores'
import { QueryClient, QueryObserver, type QueryObserverOptions } from '@tanstack/query-core'
import { anonymousUser, type User } from './user'

// some global state
const client = new QueryClient()
export const user = atom<User>(anonymousUser())

onMount(user, () => {
  const observer = new QueryObserver<User>(client, {
    queryKey: ['token'],
    queryFn: async ({ signal }) => await authServiceApi.token({ signal }),
    refetchInterval: createRefetchInterval({ backoffIntervalMs: 100, maxBackoffMs: 1000 * 60 }),
  })
  const unsubscribe = observer.subscribe(({ data }) => data && user.set(data))

  return async () => {
    unsubscribe()
  }
})

I hope this example helps someone integrate with the observer capabilities of this awesome library!