1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
unleash.unleash/website/docs/contributing/frontend/ADR/preferred-data-fetching-method.md
Fredrik Strand Oseberg 50fb671b66
Docs/dev docs (#2134)
* 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>
2022-10-19 14:32:37 +02:00

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();
}, []);
};
```