State Management Nx React Native/Expo Apps with TanStack Query and Redux
source link: https://blog.nrwl.io/state-management-nx-react-native-expo-apps-with-tanstack-query-and-redux-8f073d5d3343
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Before We Start
From TanStack Query documentation, it says:
- TanStack Queryis a server-state library.
- Redux is a client-state library.
What is the difference between the server state and the client state?
In short:
- Calling an API, dealing with asynchronous data-> server state
- Everything else about UI, dealing with synchronous data -> client state
Installation
To use TanStack Query / React Queryfor the server state, I need to install:
I will use Redux for everything else.
To install all the above packages:
#npm
npm install @tanstack/react-query @tanstack/react-query-devtools redux react-redux @reduxjs/toolkit @redux-devtools/extension redux-logger @types/redux-logger redux-persist @react-native-async-storage/async-storage --save-dev
#yarn
yarn add @tanstack/react-query @tanstack/react-query-devtools redux react-redux @reduxjs/toolkit @redux-devtools/extension redux-logger @types/redux-logger redux-persist @react-native-async-storage/async-storage --dev
#pnpm
pnpm add @tanstack/react-query @tanstack/react-query-devtools redux react-redux @reduxjs/toolkit @redux-devtools/extension redux-logger @types/redux-logger redux-persist @react-native-async-storage/async-storage --save-dev
Server State with React Query
Setup Devtools
First, you need to add React Query / TanStack Query in the App.tsx
:
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Platform } from 'react-native';
const App = () => {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
{ Platform.OS === 'web' && <ReactQueryDevtools />}
...
</QueryClientProvider>
);
};
export default App;
Note: the React Query Devtools currently do not support react native, and it only works on the web, so there is a condition: { Platform.OS === ‘web’ && <ReactQueryDevtools />}
.
For the react native apps, in order to use this tool, you need to use react-native-web to interpolate your native app to the web app first.
If you open my Expo app on the web by running nx start cats
and choose the options Press w │ open web
, you should be able to use the dev tools and see the state of my react queries:
Create a Query
What is a query?
“A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise-based method (including GET and POST methods) to fetch data from a server.” (https://tanstack.com/query/v4/docs/react/guides/queries)
Now let’s add our first query. In this example, it will be added underlib/queries
folder. To create a query to fetch a new fact about cats, run the command:
# expo workspace
npx nx generate @nx/expo:lib use-cat-fact --directory=queries
# react-native workspace
npx nx generate @nx/react-native:lib use-cat-fact --directory=queries
Or use Nx Console:
Now notice under libs folder, use-cat-fact
folder got created under libs/queries
:
If you use React Native CLI, just add a folder in your workspace root.
For this app, let’s use this API: https://catfact.ninja/. At libs/queries/use-cat-fact/src/lib/use-cat-fact.ts
, add code to fetch the data from this API:
import { useQuery } from '@tanstack/react-query';
export const fetchCatFact = async (): Promise<string> => {
const response = await fetch('https://catfact.ninja/fact');
const data = await response.json();
return data.fact;
};
export const useCatFact = () => {
return useQuery({
queryKey: ['cat-fact'],
queryFn: fetchCatFact,
enabled: false,
});
};
Essentially, you have created a custom hook that calls useQuery
function from the TanStack Query library.
Unit Testing
If you render this hook directly and run the unit test with the command npx nx test queries-use-cat-fact
, this error will show up in the console:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
To solve this, you need to wrap your component inside the renderHook
function from @testing-library/react-native
library:
- Install Library to Mock Fetch
Since you use fetch
to fetch data, you also need to install jest-fetch-mock
:
#npm
npm install jest-fetch-mock --save-dev
#yarn
yard add jest-fetch-mock --dev
You also need to mock fetch
library in libs/queries/use-cat-fact/test-setup.ts
:
import fetchMock from 'jest-fetch-mock';
fetchMock.enableMocks();
2. Create Mock Query Provider
In order to test out useQuery
hook, you need to wrap it inside a mock QueryClientProvider
. Since this mock query provider is going to be used more than once, let’s create a library for this wrapper:
# expo library
npx nx generate @nx/expo:library test-wrapper --directory=queries
# react native library
npx nx generate @nx/react-native:library test-wrapper --directory=queries
Then a component inside this library:
# expo library
npx nx generate @nx/expo:component test-wrapper --project=queries-test-wrapper
# react native library
npx nx generate @nx/react-native:component test-wrapper --project=queries-test-wrapper
Add the mock QueryClientProvider
in libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper.tsx
:
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
export interface TestWrapperProps {
children: React.ReactNode;
}
export function TestWrapper({ children }: TestWrapperProps) {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}
export default TestWrapper;
3. Use Mock Responses in Unit Test
Then this is what the unit test for my query would look like:
import { TestWrapper } from '@nx-expo-monorepo/queries/test-wrapper';
import { renderHook, waitFor } from '@testing-library/react-native';
import { useCatFact } from './use-cat-fact';
import fetchMock from 'jest-fetch-mock';
describe('useCatFact', () => {
afterEach(() => {
jest.resetAllMocks();
});
it('status should be success', async () => {
// simulating a server response
fetchMock.mockResponseOnce(JSON.stringify({
fact: 'random cat fact',
}));
const { result } = renderHook(() => useCatFact(), {
wrapper: TestWrapper,
});
result.current.refetch(); // refetching the query
expect(result.current.isLoading).toBeTruthy();
await waitFor(() => expect(result.current.isLoading).toBe(false));
expect(result.current.isSuccess).toBe(true);
expect(result.current.data).toEqual('random cat fact');
});
it('status should be error', async () => {
fetchMock.mockRejectOnce();
const { result } = renderHook(() => useCatFact(), {
wrapper: TestWrapper,
});
result.current.refetch(); // refetching the query
expect(result.current.isLoading).toBeTruthy();
await waitFor(() => expect(result.current.isLoading).toBe(false));
expect(result.current.isError).toBe(true);
});
});
Notice that this file imports TestWrapper
from @nx-expo-monorepo/queries/test-wrapper
, and it is added to renderHook
function with { wrapper: TestWrapper }
.
Now you run the test command nx test queries-use-cat-fact
, it should pass:
PASS queries-use-cat-fact libs/queries/use-cat-fact/src/lib/use-cat-fact.spec.ts (5.158 s)
useCatFact
✓ status should be success (44 ms)
✓ status should be error (96 ms)
Integrate with Component
Currently userQuery
returns the following properties:
isLoading
orstatus === 'loading'
- The query has no data yetisError
orstatus === 'error'
- The query encountered an errorisSuccess
orstatus === 'success'
- The query was successful and data is available
Now with components controlled by the server state, you can leverage the above properties and change your component to follow the below pattern:
export interface CarouselProps {
isError: boolean;
isLoading: boolean;
isSuccess: boolean;
}
export function Carousel({
isSuccess,
isError,
isLoading,
}: CarouselProps) {
return (
<>
{isSuccess && (
...
)}
{isLoading && (
...
)}
{isError && (
...
)}
</>
);
}
export default Carousel;
Then in the parent component, you can use the query created above:
import { useCatFact } from '@nx-expo-monorepo/queries/use-cat-fact';
import { Carousel } from '@nx-expo-monorepo/ui';
import React from 'react';
export function Facts() {
const { data, isLoading, isSuccess, isError, refetch, isFetching } =
useCatFact();
return (
<Carousel
content={data}
isLoading={isLoading || isFetching}
isSuccess={isSuccess}
isError={isError}
onReload={refetch}
>
...
);
}
If you serve the app on the web and open the React Query Devtools, you should be able to see the query I created cat-fact
and data in the query.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK