mirror of https://github.com/coder/coder.git
docs: update FE fetching data docs (#11376)
This commit is contained in:
parent
5d76210b0d
commit
d74e7ca20f
|
@ -99,11 +99,45 @@ the api/queries folder when it is possible.
|
||||||
|
|
||||||
### Where to fetch data
|
### Where to fetch data
|
||||||
|
|
||||||
Finding the right place to fetch data in React apps is the million-dollar
|
In the past, our approach involved creating separate components for page and
|
||||||
question, but we decided to make it only in the page components and pass the
|
view, where the page component served as a container responsible for fetching
|
||||||
props down to the views. This makes it easier to find where data is being loaded
|
data and passing it down to the view.
|
||||||
and easy to test using Storybook. So you will see components like `UsersPage`
|
|
||||||
and `UsersPageView`.
|
For instance, when developing a page to display users, we would have a
|
||||||
|
`UsersPage` component with a corresponding `UsersPageView`. The `UsersPage`
|
||||||
|
would handle API calls, while the `UsersPageView` managed the presentational
|
||||||
|
logic.
|
||||||
|
|
||||||
|
Over time, however, we encountered challenges with this approach, particularly
|
||||||
|
in terms of excessive props drilling. To address this, we opted to fetch data in
|
||||||
|
proximity to its usage. Taking the example of displaying users, in the past, if
|
||||||
|
we were creating a header component for that page, we would have needed to fetch
|
||||||
|
the data in the page component and pass it down through the hierarchy
|
||||||
|
(`UsersPage -> UsersPageView -> UsersHeader`). Now, with libraries such as
|
||||||
|
`react-query`, data fetching can be performed directly in the `UsersHeader`
|
||||||
|
component, allowing UI elements to declare and consume their data-fetching
|
||||||
|
dependencies directly, while preventing duplicate server requests
|
||||||
|
([more info](https://github.com/TanStack/query/discussions/608#discussioncomment-29735)).
|
||||||
|
|
||||||
|
To simplify visual testing of scenarios where components are responsible for
|
||||||
|
fetching data, you can easily set the queries' value using `parameters.queries`
|
||||||
|
within the component's story.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
export const WithQuota: Story = {
|
||||||
|
parameters: {
|
||||||
|
queries: [
|
||||||
|
{
|
||||||
|
key: getWorkspaceQuotaQueryKey(MockUser.username),
|
||||||
|
data: {
|
||||||
|
credits_consumed: 2,
|
||||||
|
budget: 40,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
### API
|
### API
|
||||||
|
|
||||||
|
@ -237,13 +271,16 @@ another page, you should probably consider using the **E2E** approach.
|
||||||
|
|
||||||
### Visual testing
|
### Visual testing
|
||||||
|
|
||||||
Test components without user interaction like testing if a page view is rendered
|
We use visual tests to test components without user interaction like testing if
|
||||||
correctly depending on some parameters, if the button is showing a spinner if
|
a page/component is rendered correctly depending on some parameters, if a button
|
||||||
the `loading` props are passing, etc. This should always be your first option
|
is showing a spinner, if `loading` props are passed correctly, etc. This should
|
||||||
since it is way easier to maintain. For this, we use
|
always be your first option since it is way easier to maintain. For this, we use
|
||||||
[Storybook](https://storybook.js.org/) and
|
[Storybook](https://storybook.js.org/) and
|
||||||
[Chromatic](https://www.chromatic.com/).
|
[Chromatic](https://www.chromatic.com/).
|
||||||
|
|
||||||
|
> ℹ️ To learn more about testing components that fetch API data, refer to the
|
||||||
|
> [**Where to fetch data**](#where-to-fetch-data) section.
|
||||||
|
|
||||||
### What should I test?
|
### What should I test?
|
||||||
|
|
||||||
Choosing what to test is not always easy since there are a lot of flows and a
|
Choosing what to test is not always easy since there are a lot of flows and a
|
||||||
|
|
Loading…
Reference in New Issue