@effectify/solid-query v0.0.3

@effectify/solid-query

Integration of Effect with TanStack Query for Solid.js.

Installation

# npm
npm install @effectify/solid-query

# yarn
yarn add @effectify/solid-query

# pnpm
pnpm add @effectify/solid-query

# bun
bun add @effectify/solid-query

Basic Usage

import * as Layer from 'effect/Layer'
import * as Effect from 'effect/Effect'
import { tanstackQueryEffect } from '@effectify/solid-query'

// Create an Effect layer
const AppLayer = Layer.succeed('AppConfig', { apiUrl: 'https://api.example.com' })

// Initialize the TanStack Query integration
const {
  RuntimeProvider,
  useRuntime,
  useEffectQuery,
  useEffectMutation,
  useRxSubscribe,
  useRxSubscriptionRef,
} = tanstackQueryEffect(AppLayer)

// Wrap your application with the provider
function App() {
  return (
    <RuntimeProvider>
      <YourApp />
    </RuntimeProvider>
  )
}

// Use in components
function YourComponent() {
  const query = useEffectQuery({
    queryKey: ['data'],
    queryFn: () => Effect.succeed(['item1', 'item2']),
  })

  return (
    <div>
      {query.isPending ? (
        <p>Loading...</p>
      ) : query.isError ? (
        <p>Error: {query.error.message}</p>
      ) : (
        <ul>
          {query.data.map((item) => (
            <li>{item}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

API

tanstackQueryEffect(layer)

Creates an instance of the TanStack Query integration.

Parameters

• layer: An Effect layer that provides the necessary dependencies.

Returns

An object with the following properties:

• RuntimeProvider: Provider component that should wrap your application.
• useRuntime: Hook to access the Effect runtime.
• useEffectQuery: Hook to perform queries with Effect.
• useEffectMutation: Hook to perform mutations with Effect.
• useRxSubscribe: Hook to subscribe to Effect streams.
• useRxSubscriptionRef: Hook to maintain a reference to a subscription.

Helpers

• createQueryDataHelpers: Utility to create query data manipulation helpers.
• createQueryKey: Utility to create typed query keys.

Complete Example

Check out the example application in apps/tanstack-solid-app to see a complete use case.

Credits & Inspiration

This package was inspired by the excellent educational content from Lucas Barake, particularly his video on Effect and TanStack Query which provides great insights into these technologies.

License

MIT