mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-28 00:06:53 +01:00
50fb671b66
* docs: add ADRs
* docs/adrs
* fix: update developer guide
* fix: add space
* Update website/docs/contributing/backend/overview.md
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
* docs: remove auto-generated sidebar
This should've been in .gitignore, but has only been ignored to the
ignore file for the website subdirectory. (This has been fixed on main.)
* docs: delete empty file
* Revert "docs: delete empty file"
This reverts commit 2435f173ff
.
* docs: add frontmatter to new dev docs
* Docs(fix): add quotes around page titles
In yaml, the colon is a special character, so we need to use quotes.
* docs: fix remaining titles
* Update website/docs/contributing/backend/overview.md
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
* fix: update empty ADR
* fix: update text to reflect postgres 12
* fix: update backend overview
* fix: remove link
* fix: add form ADR
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
84 lines
2.1 KiB
Markdown
84 lines
2.1 KiB
Markdown
---
|
|
title: "ADR: Preferred data fetching method"
|
|
---
|
|
|
|
## Background
|
|
|
|
We have found a need to standardise how we fetch data from APIs, in order to reduce complexity and simplify the data fetching process.
|
|
|
|
## Decision
|
|
|
|
We have decided to remove redux from our application and fetch all of our data via a third party library called `useSWR` (SWR stands for stale-while-revalidate and is a common cache strategy).
|
|
|
|
```tsx
|
|
// Do:
|
|
// useSegments.ts
|
|
|
|
import useSWR from 'swr';
|
|
import { useCallback } from 'react';
|
|
import { formatApiPath } from 'utils/formatPath';
|
|
import handleErrorResponses from '../httpErrorResponseHandler';
|
|
import { ISegment } from 'interfaces/segment';
|
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
|
import { IFlags } from 'interfaces/uiConfig';
|
|
|
|
export interface UseSegmentsOutput {
|
|
segments?: ISegment[];
|
|
refetchSegments: () => void;
|
|
loading: boolean;
|
|
error?: Error;
|
|
}
|
|
|
|
export const useSegments = (strategyId?: string): UseSegmentsOutput => {
|
|
const { uiConfig } = useUiConfig();
|
|
|
|
const { data, error, mutate } = useSWR(
|
|
[strategyId, uiConfig.flags],
|
|
fetchSegments
|
|
);
|
|
|
|
const refetchSegments = useCallback(() => {
|
|
mutate().catch(console.warn);
|
|
}, [mutate]);
|
|
|
|
return {
|
|
segments: data,
|
|
refetchSegments,
|
|
loading: !error && !data,
|
|
error,
|
|
};
|
|
};
|
|
|
|
export const fetchSegments = async (
|
|
strategyId?: string,
|
|
flags?: IFlags
|
|
): Promise<ISegment[]> => {
|
|
if (!flags?.SE) {
|
|
return [];
|
|
}
|
|
|
|
return fetch(formatSegmentsPath(strategyId))
|
|
.then(handleErrorResponses('Segments'))
|
|
.then(res => res.json())
|
|
.then(res => res.segments);
|
|
};
|
|
|
|
const formatSegmentsPath = (strategyId?: string): string => {
|
|
return strategyId
|
|
? formatApiPath(`api/admin/segments/strategies/${strategyId}`)
|
|
: formatApiPath('api/admin/segments');
|
|
};
|
|
|
|
// Don't:
|
|
const MyComponent = () => {
|
|
useEffect(() => {
|
|
const getData = () => {
|
|
fetch(API_URL)
|
|
.then(res => res.json())
|
|
.then(setData);
|
|
};
|
|
getData();
|
|
}, []);
|
|
};
|
|
```
|