React Query for data fetching in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main hook from React Query.

React Native

import { [1] } from '@tanstack/react-query';

Drag options to blanks, or click blank then click option'

AuseState

BuseContext

CuseQuery

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using React built-in hooks like useState or useEffect instead of useQuery.

Trying to import useContext which is unrelated to data fetching.

The useQuery hook is the main React Query hook used to fetch data.

2fill in blank

medium

Complete the code to fetch data from the API endpoint using useQuery.

React Native

const { data, isLoading } = useQuery(['todos'], () => fetch('[1]').then(res => res.json()));

Drag options to blanks, or click blank then click option'

A'https://api.example.com/todos'

B'/local/data.json'

C'https://wrong.url/api'

D'http://localhost:3000'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a local file path instead of an API URL.

Using an incorrect or unreachable URL.

The URL 'https://api.example.com/todos' is the correct API endpoint to fetch todos.

3fill in blank

hard

Fix the error in the code by completing the missing option to enable refetching on window focus.

React Native

const { data, refetch } = useQuery(['user'], fetchUser, { refetchOnWindow[1]: true });

Drag options to blanks, or click blank then click option'

ABlur

BLoad

CClick

DFocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'refetchOnWindowBlur' which is not a valid option.

Using unrelated words like 'Click' or 'Load'.

The option refetchOnWindowFocus enables React Query to refetch data when the window gains focus.

4fill in blank

hard

Fill both blanks to create a query key and a fetch function for React Query.

React Native

const { data } = useQuery([[1]], () => fetch([2]).then(res => res.json()));

Drag options to blanks, or click blank then click option'

A'posts'

B'https://api.example.com/posts'

C'users'

D'https://api.example.com/users'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing query keys and URLs incorrectly.

Using mismatched keys and URLs.

The query key 'posts' matches the API endpoint 'https://api.example.com/posts' to fetch posts data.

5fill in blank

hard

Fill all three blanks to destructure data, loading state, and error from useQuery.

React Native

const { [1], [2], [3] } = useQuery(['profile'], fetchProfile);

Drag options to blanks, or click blank then click option'

Adata

BisLoading

Cerror

DsetData

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to destructure setter functions like setData which React Query does not provide.

Missing one of the three important properties.

React Query returns data, isLoading, and error to handle fetched data, loading state, and errors.