Solid Services

Services are "global" objects useful for features that require shared state or persistent connections. They are lazy evaluated, only when used, solving an issue of cross dependencies and contexts tree.

Example uses of services might include:

• User/session authentication
• Geolocation
• WebSockets
• Server-sent events or notifications
• Server-backed API calls libraries
• Third-party APIs
• Logging

Installation

npm i solid-services

Compatibility

• Solid.js ^1.0

Demo

Open on CodeSandbox

Using a ServiceRegistry

ServiceRegistry will create a context around your components allowing you to scope the services to specific part of the application.

// app.tsx
import { ServiceRegistry } from 'solid-services';

export default App(props) {
  return (
    <ServiceRegistry>
      {props.children}
    </ServiceRegistry>
  )
}

Defining a service

To define a service define a function that returns an instance of a class or a POJO object.

// eg. ./services/auth.ts

export function AuthService() {
  const [getUser, setUser] = createSignal();

  return {
    get user() {
      return getUser();
    },

    login(user) {
      setUser(user);
    },

    logout() {
      setUser(undefined)
    },
  }
}

Accessing a service

To access a service in your components or other services use useService(). It will register a service or return existing object if it was already used in the past.

// components/logout.tsx
import { useService } from "solid-services";
import AuthService from "../services/auth";

export default function LogoutComponent() {
  const authService = useService(AuthService)
  
  function logout() {
    authService().logout();  
  }
  
  return <button onClick={logout}>Logout<button>
}