{"id":4477,"date":"2023-09-05T15:20:18","date_gmt":"2023-09-05T08:20:18","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=4477"},"modified":"2023-09-05T15:29:08","modified_gmt":"2023-09-05T08:29:08","slug":"tutorial-react-native-mengenal-react-query","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/","title":{"rendered":"React Native Tutorial: Getting to Know React Query"},"content":{"rendered":"\r\n<p><\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<p>Data retrieval from a remote source is required in almost every program you will create. Unfortunately, retrieving data is rarely as straightforward as simply retrieving it and presenting it. Consider the following:<\/p>\r\n\r\n\r\n\r\n<p>What should we do while we wait for the data to load?<\/p>\r\n\r\n\r\n\r\n<p>What if something goes wrong?<\/p>\r\n\r\n\r\n\r\n<p>How do I keep my data current?<\/p>\r\n\r\n\r\n\r\n<p>What if my user&#8217;s internet connection is weak or slow?<\/p>\r\n\r\n\r\n\r\n<p>React Query can assist you with all of these tasks.<\/p>\r\n\r\n\r\n\r\n<p>Today, we&#8217;ll show a simple showcase app from the fetch API to React Query.<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#1_Appjs\" >1. App.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#2_MoviesListScreenjs\" >2. MoviesListScreen.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#3_MovieDetailsScreenjs\" >3. MovieDetailsScreen.js<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Appjs\"><\/span>1. App.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import * as React from 'react';\r\nimport { NavigationContainer } from '@react-navigation\/native';\r\nimport { createStackNavigator } from '@react-navigation\/stack';\r\n\r\nimport { QueryClient, QueryClientProvider } from 'react-query';\r\n\r\nimport { MoviesListScreen } from '.\/screens\/MoviesListScreen';\r\nimport { MovieDetailsScreen } from '.\/screens\/MovieDetailsScreen';\r\n\r\nconst Stack = createStackNavigator();\r\n\r\nconst queryClient = new QueryClient({\r\n  defaultOptions: { queries: { retry: 2 } },\r\n});\r\n\r\nfunction MoviesStack() {\r\n  return (\r\n    &lt;Stack.Navigator initialRouteName=\"MoviesList\">\r\n      &lt;Stack.Screen\r\n        name=\"MoviesList\"\r\n        component={MoviesListScreen}\r\n        options={{\r\n          headerTitle: 'Movies',\r\n        }}\r\n      \/>\r\n      &lt;Stack.Screen\r\n        name=\"MovieDetails\"\r\n        component={MovieDetailsScreen}\r\n        options={{\r\n          headerTitle: 'Movie details',\r\n        }}\r\n      \/>\r\n    &lt;\/Stack.Navigator>\r\n  );\r\n}\r\n\r\nexport default function App() {\r\n  return (\r\n    &lt;QueryClientProvider client={queryClient}>\r\n      &lt;NavigationContainer>\r\n        &lt;MoviesStack \/>\r\n      &lt;\/NavigationContainer>\r\n    &lt;\/QueryClientProvider>\r\n  );\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_MoviesListScreenjs\"><\/span>2. MoviesListScreen.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"MoviesListScreen.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import * as React from 'react';\r\nimport { FlatList, RefreshControl } from 'react-native';\r\nimport { useQuery } from 'react-query';\r\n\r\nimport { LoadingIndicator } from '..\/components\/LoadingIndicator';\r\nimport { ErrorMessage } from '..\/components\/ErrorMessage';\r\nimport { Divider } from '..\/components\/Divider';\r\nimport { ListItem } from '..\/components\/ListItem';\r\nimport { useRefreshByUser } from '..\/hooks\/useRefreshByUser';\r\nimport { useRefreshOnFocus } from '..\/hooks\/useRefreshOnFocus';\r\nimport { fetchMovies } from '..\/lib\/api';\r\n\r\nexport function MoviesListScreen({ navigation }) {\r\n  const { isLoading, error, data, refetch } = useQuery(['movies'], fetchMovies);\r\n  const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch);\r\n  useRefreshOnFocus(refetch);\r\n\r\n  const onListItemPress = React.useCallback(\r\n    (movie) => {\r\n      navigation.navigate('MovieDetails', {\r\n        movie,\r\n      });\r\n    },\r\n    [navigation]\r\n  );\r\n\r\n  const renderItem = React.useCallback(\r\n    ({ item }) => {\r\n      return &lt;ListItem item={item} onPress={onListItemPress} \/>;\r\n    },\r\n    [onListItemPress]\r\n  );\r\n\r\n  if (isLoading) return &lt;LoadingIndicator \/>;\r\n\r\n  if (error) return &lt;ErrorMessage message={error.message}>&lt;\/ErrorMessage>;\r\n\r\n  return (\r\n    &lt;FlatList\r\n      data={data}\r\n      renderItem={renderItem}\r\n      keyExtractor={(item) => item.title}\r\n      ItemSeparatorComponent={() => &lt;Divider \/>}\r\n      refreshControl={\r\n        &lt;RefreshControl\r\n          refreshing={isRefetchingByUser}\r\n          onRefresh={refetchByUser}\r\n        \/>\r\n      }>&lt;\/FlatList>\r\n  );\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_MovieDetailsScreenjs\"><\/span>3. MovieDetailsScreen.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"MovieDetailsScreen.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import * as React from 'react';\r\nimport { View, RefreshControl, StyleSheet, ScrollView } from 'react-native';\r\nimport { Title, Paragraph } from 'react-native-paper';\r\nimport { useQuery } from 'react-query';\r\n\r\nimport { LoadingIndicator } from '..\/components\/LoadingIndicator';\r\nimport { ErrorMessage } from '..\/components\/ErrorMessage';\r\nimport { useRefreshByUser } from '..\/hooks\/useRefreshByUser';\r\nimport { fetchMovie } from '..\/lib\/api';\r\n\r\nexport function MovieDetailsScreen({ route }) {\r\n  const { isLoading, error, data, refetch } = useQuery(\r\n    ['movie', route.params.movie.title],\r\n    () => fetchMovie(route.params.movie.title),\r\n    { initialData: route.params.movie }\r\n  );\r\n\r\n  const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch);\r\n\r\n  if (isLoading) return &lt;LoadingIndicator \/>;\r\n\r\n  if (error) return &lt;ErrorMessage message={error.message}>&lt;\/ErrorMessage>;\r\n\r\n  return (\r\n    &lt;ScrollView\r\n      refreshControl={\r\n        &lt;RefreshControl\r\n          refreshing={isRefetchingByUser}\r\n          onRefresh={refetchByUser}\r\n        \/>\r\n      }>\r\n      &lt;View style={styles.titleRow}>\r\n        &lt;Title>\r\n          {data.title} ({data.year})\r\n        &lt;\/Title>\r\n      &lt;\/View>\r\n      {data.info ? (\r\n        &lt;>\r\n          &lt;View style={styles.infoRow}>\r\n            &lt;Paragraph>{data.info.plot}&lt;\/Paragraph>\r\n          &lt;\/View>\r\n          &lt;View style={styles.actorsRow}>\r\n            &lt;Paragraph>\r\n              {data.info.actors.slice(0, -1).join(', ') +\r\n                ' or ' +\r\n                data.info.actors.slice(-1)}\r\n            &lt;\/Paragraph>\r\n          &lt;\/View>\r\n        &lt;\/>\r\n      ) : (\r\n        &lt;LoadingIndicator \/>\r\n      )}\r\n    &lt;\/ScrollView>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  titleRow: {\r\n    flexDirection: 'row',\r\n    margin: 20,\r\n  },\r\n  infoRow: {\r\n    flexDirection: 'row',\r\n    margin: 20,\r\n  },\r\n  actorsRow: {\r\n   flexDirection: 'column',\r\n    margin: 20,\r\n    marginTop: 10,\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<p>Note: The code showing above only the main part, please check the sample code on snack for more detail code<\/p>\r\n\r\n\r\n\r\n<p>Snack Link : https:\/\/snack.expo.dev\/@rudiahmad\/react-query-simple-example<\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Data retrieval from a remote source is required in almost every program you will create. Unfortunately, retrieving data is rarely as straightforward as simply retrieving it and presenting it. Consider the following: What should&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":4482,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[150,145],"class_list":["post-4477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-react-native","tag-source-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=4477"}],"version-history":[{"count":7,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4477\/revisions"}],"predecessor-version":[{"id":4487,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4477\/revisions\/4487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/4482"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=4477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=4477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=4477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}