@effectify/solid-query

Integration of Effect with TanStack Query for Solid.js.

Alpha Version: This package now supports Effect v4 beta. Install with @alpha tag for latest v4 compatibility.

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