\nFetching data and updating user interfaces is a logic pattern we use all the time in our React apps. There are many ways of achieving a likewise pattern, think of simply fetching from `componentDidMount` or using a global state manager like Mobx or Redux. However you solve the problem, it will inevitably lead to a considerable amount of boilerplate code which has to be repeated every time data needs to be fetched -- let alone sharing data between multiple components.\n
\n\nThis package provides a simpler way to manage data from a server (that utilizes nest-utilities), for apps that use nest-utilities-client.\n
\n\nUsing data, fetch state, errors and more can be done in a single line of code. States from identical fetch requests are shared between components, making it possible for multiple live components to draw resources from the same state. Essentially functioning as a global state manager for remote data from your API.\n
\n\n## How does it work?\n\nNUCS keeps a live state for every unique request hook you use. A request's uniqueness is determined by i.a. it's NUC service, endpoint and http options.\n\nFor example, if you wanted to use a request state for fetching all users with name \"Alex\", you would use `useAll(userService, { filter: { name: { $eq: \"Alex\" }}})`.\n\nThe request state's defining properties are `userService`, and query `name=Alex`. Under the hood, those properties are used to generate an identifier for this particular request state. If you were to implement another request hook with those exact same parameters, the already created request state will be used, because their identifiers are equal. Therefor that state could be shared by multiple components and/or compositions and their respectable states and views will be synchronized.\n\n## How to use & examples\n\nThe packages provides a set of pre-made hooks regarding common use cases for persistant data (e.g. CRUD functions).\n\n| Hook | CRUD Function |\n| ----------- | ------------- |\n| `useAll` | GET |\n| `useById` | GET |\n| `useDelete` | DELETE |\n| `useMany` | GET |\n| `usePatch` | PATCH |\n| `usePost` | POST |\n| `usePut` | PUT |\n\nOr, for edge cases: `useRequest`.\n\nAll these hooks return an IRequestState object. The following example implements request state properties in a practical context.\n\n#### Simple implementation\n\nThis react function component renders some user info.\n\n```typescript\nfunction User({ id: string }) {\n const { data } = useById(userService, id);\n\n return (\n{data?.firstName}
\n{data?.email}
\n{data?.dateOfBirth}
\nError: {response?.data.message}
\n );\n}\n```\n\n### Custom hooks\n\nOfcourse, the provided hooks aren't restricted to usage directly in a React function component. React hooks were created for reusable state logic and this package adheres to that philosophy.\n\n#### A `useAll` implementation with some preset http options.\n\n```typescript\n/**\n * Gets 10 most popular articles and their authors.\n */\nfunction usePopularArticles() {\n return useAll(articleService, {\n sort: ['-likesAmount'],\n populate: ['author'],\n limit: 10,\n });\n}\n```\n\n#### A custom authorization state manager\n\n```typescript\n/**\n * Manages a session token.\n */\nfunction useSession() {\n const { data: sessionToken, response, call, service, cacheKey } = usePost(\n authenticationService,\n { populate: ['user'] },\n { cache: 'authentication' }\n );\n\n // Create login call\n const login = useCallback(\n async (credentials: FormData) => await call(credentials as any),\n [call]\n );\n\n // Create validate call\n const validate = useCallback(async () => await call(service.validate()), [\n call,\n ]);\n\n useEffect(() => {\n const { token } = sessionToken;\n // Do something with the cache key and session token.\n // For example, pass the token to your HTTP Headers in some base service class.\n }, [cacheKey, sessionToken]);\n\n return {\n login,\n validate,\n response,\n sessionToken,\n };\n}\n\nfunction App() {\n const { login, sessionToken } = useSession();\n\n if (sessionToken?.isActive) return (\nTotal available players: {response?.headers.get('X-total-count')}
\n