Solid Services
Services are "global" objects useful for features that require shared state or persistent connections. 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
Using a ServiceRegistry
ServiceRegistry will create a context around your components allowing you to scope the services to specific part of the application.
By default, you don't need to do anything as your application will use a global registry. However, if you plan to run a few apps on one page it might be good idea to isolate their services states.
// 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>
}
151 Jan 3, 2023
42 Nov 2, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
6 Apr 18, 2022
2 Feb 3, 2022
67 Nov 22, 2022
4 Sep 19, 2022
10 Jul 21, 2022
31 Jan 8, 2023
21 Dec 11, 2022
6 May 19, 2022
6 Oct 28, 2022
22 Dec 26, 2022
4 May 4, 2022
8 Nov 17, 2022
12 Nov 24, 2022
5 Sep 14, 2022