|
1 |
| -# 🔗 lomkit-rest-client |
| 1 | +# 🔗 lomkit-rest-api-nuxt-sdk |
2 | 2 |
|
3 | 3 | > A Nuxt 3 SDK to easily interact with [lomkit/laravel-rest-api](https://github.com/lomkit/laravel-rest-api) endpoints — powered by TypeScript, designed for Nuxt ⚡️
|
4 | 4 |
|
| 5 | +# 🔗 lomkit-rest-api-nuxt-sdk |
| 6 | + |
| 7 | +[](https://www.npmjs.com/package/lomkit-rest-api-nuxt-sdk) |
| 8 | +[](https://www.npmjs.com/package/lomkit-rest-api-nuxt-sdk) |
| 9 | +[](https://www.typescriptlang.org/) |
| 10 | +[](./LICENSE) |
| 11 | + |
5 | 12 | **Note:** This package is community-built and not officially affiliated with Lomkit. It’s fully open-source and contributions are welcome!
|
6 | 13 |
|
7 | 14 | ---
|
8 | 15 |
|
9 | 16 | ## ✨ Features
|
10 | 17 |
|
11 | 18 | - 📦 Resource-based client
|
12 |
| -- 🔐 Built-in token handling via cookies |
13 |
| -- ⚙️ Configurable base API URL and token cookie name |
| 19 | +- 🔍 Search, details, mutate, actions, and delete Methods |
| 20 | +- 🛠️ Auto-imported resources in Nuxt 3 |
| 21 | +- 🧩 TypeScript support for better developer experience |
| 22 | +- 🔄 Hooks for request and response handling |
14 | 23 | - 🌍 Works seamlessly with Nuxt 3 and TypeScript
|
15 | 24 |
|
16 | 25 | ---
|
17 | 26 |
|
18 | 27 | ## 📦 Installation
|
19 | 28 |
|
20 | 29 | ```bash
|
21 |
| -npm install lomkit-rest-client |
| 30 | +npm install lomkit-rest-api-nuxt-sdk |
| 31 | +``` |
| 32 | + |
| 33 | +and then add it to your Nuxt 3 project by adding it to your `nuxt.config.ts`: |
| 34 | + |
| 35 | +```typescript |
| 36 | +// nuxt.config.ts |
| 37 | +export default defineNuxtConfig({ |
| 38 | + modules: ["lomkit-rest-api-nuxt-sdk"], |
| 39 | + // other configurations... |
| 40 | +}); |
22 | 41 | ```
|
23 | 42 |
|
24 | 43 | ## ⚙️ Configuration
|
25 | 44 |
|
26 |
| -to use the Lomkit REST client, you need to configure it in your Nuxt 3 application. You can do this by creating a plugin file in your `plugins` directory. |
| 45 | +to use the Lomkit REST API SDK, you need to configure it in your Nuxt 3 application. You can do this by creating a plugin file in your `plugins` directory. |
27 | 46 |
|
28 | 47 | ```typescript
|
29 | 48 | // plugins/restClient.ts
|
30 | 49 | export default defineNuxtPlugin(() => {
|
31 | 50 | const lomkitRestClient = useNuxtApp().$lomkitRestClient;
|
32 |
| - lomkitRestClient.addApiClient({ |
33 |
| - slug: "default", |
34 |
| - url: "https://localhost", |
35 |
| - requestInit: () => { |
| 51 | + lomkitRestClient.setApiFetchOptions({ |
| 52 | + baseURL: "https://localhost", |
| 53 | + onRequest: ({ options }) => { |
36 | 54 | const access_token = useCookie("cookie");
|
37 |
| - return { |
38 |
| - headers: { |
39 |
| - Authorization: `Bearer ${access_token.value}`, |
40 |
| - }, |
41 |
| - credentials: "include", |
42 |
| - }; |
| 55 | + options.headers.set( |
| 56 | + "Authorization", |
| 57 | + `Bearer ${access_token.value}` |
| 58 | + ); |
43 | 59 | },
|
44 | 60 | });
|
45 | 61 | });
|
46 | 62 | ```
|
47 | 63 |
|
48 | 64 | explanation:
|
49 | 65 |
|
50 |
| -- `slug`: A unique identifier for the API client. |
51 |
| -- `url`: The base URL of your Lomkit REST API. |
52 |
| -- `requestInit`: A function that returns an object containing the request headers and credentials. In this case, it retrieves the access token from a cookie named `cookie` and includes it in the `Authorization` header. |
53 |
| -- `credentials`: Set to `include` to include cookies in cross-origin requests. |
| 66 | +- `baseURL`: The base URL of your Lomkit REST API. |
| 67 | +- `onRequest`: Lets you modify request options before sending, e.g., adding an `Authorization` header from a cookie. |
| 68 | + |
| 69 | +> **Tip:** The SDK uses `ofetch` from Nuxt under the hood, so you can configure many options in the `setApiFetchOptions` method. For more details, refer to the [ofetch documentation](https://github.com/unjs/ofetch). |
54 | 70 |
|
55 |
| -you can add multiple API clients with different configurations by calling `addApiClient` multiple times with different `slug` values. |
| 71 | +# 📚 defineResource |
56 | 72 |
|
57 |
| -# 📚 useResource |
| 73 | +The `defineResource` is the main entry point for interacting with the Lomkit REST API. It allows you to create a resource SDK that can perform various operations on a specific resource. |
58 | 74 |
|
59 |
| -The `useResource` composable is the main entry point for interacting with the Lomkit REST API. It allows you to create a resource client that can perform various operations on a specific resource. |
| 75 | +The `defineResource<T>(resourceName, resourcePreset?)` composable returns an object with methods to interact with a specific resource via the Lomkit REST API. See the [methods](#methods) section for more details. |
60 | 76 |
|
61 |
| -The `useResource<T>(resourceName, resourceConfig?)` composable returns an object with methods to interact with a specific resource via the Lomkit REST API. See the [methods](#methods) section for more details. |
| 77 | +> **Tip:** All resources in the `resources` folder are auto-imported by Nuxt, so you can use them directly in your components without manual imports. |
62 | 78 |
|
63 | 79 | ```ts
|
64 |
| -const preset = { |
| 80 | +// resources/products.ts |
| 81 | + |
| 82 | +export const useProducts = defineResource<IProducts>("products", { |
| 83 | + onRequest: ({ options }) => { |
| 84 | + const access_token = useCookie("cookie"); |
| 85 | + options.headers.set("Authorization", `Bearer ${access_token.value}`); |
| 86 | + }, |
| 87 | + onResponse: ({ response }) => { |
| 88 | + toast.success("Request successful!"); |
| 89 | + }, |
| 90 | + //... |
| 91 | +}); |
| 92 | + |
| 93 | +//you can also define presets for the search method, like relations, filters, etc. |
| 94 | +export const useProducts = defineResource<IProducts>("products", { |
65 | 95 | search: {
|
66 | 96 | includes: [
|
67 | 97 | {
|
68 | 98 | relation: "category",
|
69 | 99 | },
|
70 | 100 | {
|
71 |
| - relation: "stars", |
| 101 | + relation: "star", |
72 | 102 | },
|
73 | 103 | ],
|
74 |
| - limit: 12, |
75 | 104 | },
|
76 |
| -}; |
77 |
| - |
78 |
| -const productsResource = useResource<IProducts>("products", preset); |
79 |
| - |
80 |
| -//you can also destructure the result to get the methods directly |
81 |
| -const { mutate, findOne, search } = useResource<IProducts>("products", preset); |
82 |
| -``` |
83 |
| - |
84 |
| -## <a id="methods"></a> 🧩 Methods |
85 |
| - |
86 |
| -### 🔎 `search(request?)` |
87 |
| - |
88 |
| -Search for resources based on the request parameters. (See [Search](https://laravel-rest-api.lomkit.com/endpoints/search) for more details.) |
89 |
| -search also add to the response methods for pagination, `nextPage()`, `previousPage()`, `goToPage()` |
90 |
| - |
91 |
| -```TypeScript |
92 |
| -const res = await productsResource.search({ |
93 |
| - filters: [{ |
94 |
| - field: "name", |
95 |
| - name: "Product Name", |
96 |
| - }], |
97 |
| - includes: [ |
98 |
| - { |
99 |
| - relation: "category", |
100 |
| - } |
101 |
| - ] |
102 |
| -}).catch((err) => console.error("Error during search: " ,err)); |
103 |
| - |
104 |
| -//pagination methods |
105 |
| -const products = ref(res); |
106 |
| -const handleNextPage = () => { |
107 |
| - products.value = await products.nextPage(); |
108 |
| -}; |
109 |
| - |
110 |
| -``` |
111 |
| - |
112 |
| -### 🔎 `findOne(request?)` |
113 |
| - |
114 |
| -Returns the first matching resource. (See [Search](https://laravel-rest-api.lomkit.com/endpoints/search) for more details.) |
115 |
| - |
116 |
| -```TypeScript |
117 |
| -const product = await productsResource.findOne({ |
118 |
| - filters: [{ |
119 |
| - field: "name", |
120 |
| - name: "Product Name", |
121 |
| - }], |
| 105 | + //... |
122 | 106 | });
|
123 | 107 | ```
|
124 | 108 |
|
125 |
| -### 🔎 `findOneById(id)` |
| 109 | +> ⚠️ **Note:** The `baseURL` specified here will not override the global configuration. Hooks such as `onRequest` and `onResponse` will be merged with the global settings, not replace them. |
126 | 110 |
|
127 |
| -Returns a resource by its ID. |
| 111 | +## <a id="methods"></a> 🧩 Methods |
128 | 112 |
|
129 |
| -```TypeScript |
130 |
| -const product = await productsResource.findOneById(1); |
131 |
| -``` |
| 113 | +your resource SDK will have the following methods available: |
132 | 114 |
|
133 | 115 | ### 🧾 `details()`
|
134 | 116 |
|
135 | 117 | Returns the details of a resource. (See [Details](https://laravel-rest-api.lomkit.com/endpoints/details) for more details.)
|
136 | 118 |
|
137 |
| -```TypeScript |
| 119 | +```ts |
| 120 | +const productsResource = useProducts(); |
138 | 121 | const details = await productsResource.details();
|
139 | 122 | ```
|
140 | 123 |
|
| 124 | +### 🔎 `search(request?)` |
| 125 | + |
| 126 | +Search for resources based on the request parameters. (See [Search](https://laravel-rest-api.lomkit.com/endpoints/search) for more details.) |
| 127 | + |
| 128 | +```ts |
| 129 | +const productsResource = useProducts(); |
| 130 | +const res = await productsResource |
| 131 | + .search({ |
| 132 | + filters: [ |
| 133 | + { |
| 134 | + field: "name", |
| 135 | + name: "Product Name", |
| 136 | + }, |
| 137 | + ], |
| 138 | + includes: [ |
| 139 | + { |
| 140 | + relation: "category", |
| 141 | + }, |
| 142 | + ], |
| 143 | + }) |
| 144 | + .catch((err) => console.error("Error during search: ", err)); |
| 145 | +``` |
| 146 | + |
141 | 147 | ### ✏️ `mutate(mutations)`
|
142 | 148 |
|
143 | 149 | Mutate a resource with the provided mutations. (See [Mutate](https://laravel-rest-api.lomkit.com/endpoints/mutate) for more details.)
|
144 | 150 |
|
145 |
| -```TypeScript |
146 |
| -const response = await productsResource.mutate([ |
147 |
| - { |
148 |
| - operation: "update", |
149 |
| - key: 2, |
150 |
| - relations: { |
151 |
| - star: { |
152 |
| - operation: "attach", |
153 |
| - key: 1 |
154 |
| - } |
155 |
| - } |
156 |
| - }, |
157 |
| -]).catch((err) => console.error("Error during mutation: " ,err)); |
| 151 | +```ts |
| 152 | +const productsResource = useProducts(); |
| 153 | +const response = await productsResource |
| 154 | + .mutate([ |
| 155 | + { |
| 156 | + operation: "update", |
| 157 | + key: 2, |
| 158 | + relations: { |
| 159 | + star: { |
| 160 | + operation: "attach", |
| 161 | + key: 1, |
| 162 | + }, |
| 163 | + }, |
| 164 | + }, |
| 165 | + ]) |
| 166 | + .catch((err) => console.error("Error during mutation: ", err)); |
158 | 167 | ```
|
159 | 168 |
|
160 | 169 | ### ⚙️ `actions(actionName, params?)`
|
161 | 170 |
|
162 | 171 | Execute a specific action on a resource. (See [Actions](https://laravel-rest-api.lomkit.com/endpoints/actions) for more details.)
|
163 | 172 |
|
164 |
| -```TypeScript |
| 173 | +```ts |
| 174 | +const productsResource = useProducts(); |
165 | 175 | const response = await productsResource.actions("publish", {
|
166 |
| - search: { |
167 |
| - filters: [{ field: 'id', value: 1 }] |
168 |
| - } |
| 176 | + search: { |
| 177 | + filters: [{ field: "id", value: 1 }], |
| 178 | + }, |
169 | 179 | });
|
170 | 180 | ```
|
171 | 181 |
|
172 | 182 | ### 🗑️ `remove(ids)`
|
173 | 183 |
|
174 | 184 | Delete resources by their IDs. (See [Delete](https://laravel-rest-api.lomkit.com/endpoints/delete) for more details.)
|
175 | 185 |
|
176 |
| -```TypeScript |
| 186 | +```ts |
| 187 | +const productsResource = useProducts(); |
177 | 188 | const response = await productsResource.remove([1, 2]);
|
178 | 189 | ```
|
179 | 190 |
|
180 | 191 | ## Contributions
|
181 | 192 |
|
182 |
| -Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request on the [GitHub repository](https://github.com/edepauw/lomkit-rest-client). |
| 193 | +Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request on the [GitHub repository](https://github.com/edepauw/lomkit-rest-api-nuxt-sdk). |
183 | 194 |
|
184 | 195 | ## License
|
185 | 196 |
|
|
0 commit comments