{"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 class=\"wp-block-paragraph\"><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">What should we do while we wait for the data to load?<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">What if something goes wrong?<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">How do I keep my data current?<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">What if my user&#8217;s internet connection is weak or slow?<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">React Query can assist you with all of these tasks.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">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_85 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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Snack Link : https:\/\/snack.expo.dev\/@rudiahmad\/react-query-simple-example<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"webmaster\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"React Native Tutorial: Getting to Know React Query\" \/>\n\t\t<meta property=\"og:description\" content=\"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2023-09-05T08:20:18+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-09-05T08:29:08+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"React Native Tutorial: Getting to Know React Query\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&amp;ssl=1\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#blogposting\",\"name\":\"React Native Tutorial: Getting to Know React Query\",\"headline\":\"React Native Tutorial: Getting to Know React Query\",\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/react-query-logo.png\",\"width\":282,\"height\":179,\"caption\":\"react-query-logo\"},\"datePublished\":\"2023-09-05T15:20:18+07:00\",\"dateModified\":\"2023-09-05T15:29:08+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#webpage\"},\"articleSection\":\"React Native, react native, source code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/#listItem\",\"name\":\"React Native\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/#listItem\",\"position\":2,\"name\":\"React Native\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#listItem\",\"name\":\"React Native Tutorial: Getting to Know React Query\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#listItem\",\"position\":3,\"name\":\"React Native Tutorial: Getting to Know React Query\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/#listItem\",\"name\":\"React Native\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#webpage\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/\",\"name\":\"React Native Tutorial: Getting to Know React Query\",\"description\":\"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/react-query-logo.png\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#mainImage\",\"width\":282,\"height\":179,\"caption\":\"react-query-logo\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-tutorial-getting-to-know-react-query\\\/#mainImage\"},\"datePublished\":\"2023-09-05T15:20:18+07:00\",\"dateModified\":\"2023-09-05T15:29:08+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"name\":\"Bagi2info.com\",\"description\":\"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"React Native Tutorial: Getting to Know React Query","description":"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?","canonical_url":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#blogposting","name":"React Native Tutorial: Getting to Know React Query","headline":"React Native Tutorial: Getting to Know React Query","author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/09\/react-query-logo.png","width":282,"height":179,"caption":"react-query-logo"},"datePublished":"2023-09-05T15:20:18+07:00","dateModified":"2023-09-05T15:29:08+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#webpage"},"isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#webpage"},"articleSection":"React Native, react native, source code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/www.bagi2info.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/#listItem","name":"React Native"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/#listItem","position":2,"name":"React Native","item":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#listItem","name":"React Native Tutorial: Getting to Know React Query"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#listItem","position":3,"name":"React Native Tutorial: Getting to Know React Query","previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/#listItem","name":"React Native"}}]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/#person","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author","url":"https:\/\/www.bagi2info.com\/en\/author\/admin\/","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"WebPage","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#webpage","url":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/","name":"React Native Tutorial: Getting to Know React Query","description":"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#breadcrumblist"},"author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/09\/react-query-logo.png","@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#mainImage","width":282,"height":179,"caption":"react-query-logo"},"primaryImageOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/#mainImage"},"datePublished":"2023-09-05T15:20:18+07:00","dateModified":"2023-09-05T15:29:08+07:00"},{"@type":"WebSite","@id":"https:\/\/www.bagi2info.com\/en\/#website","url":"https:\/\/www.bagi2info.com\/en\/","name":"Bagi2info.com","description":"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","og:type":"article","og:title":"React Native Tutorial: Getting to Know React Query","og:description":"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?","og:url":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/","og:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","og:image:secure_url":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","article:published_time":"2023-09-05T08:20:18+00:00","article:modified_time":"2023-09-05T08:29:08+00:00","twitter:card":"summary","twitter:site":"@bagi2infocom","twitter:title":"React Native Tutorial: Getting to Know React Query","twitter:description":"Pengambilan data dari sumber jarak jauh diperlukan di hampir setiap program yang akan Anda buat. Sayangnya, mengambil data tidak semudah mengambil dan menyajikannya. Pertimbangkan hal berikut: Apa yang harus kita lakukan sambil menunggu data dimuat? Bagaimana jika terjadi kesalahan? Bagaimana cara menjaga data saya tetap terkini? Bagaimana jika koneksi internet pengguna saya lemah atau lambat?","twitter:creator":"@bagi2infocom","twitter:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&ssl=1"},"aioseo_meta_data":{"post_id":"4477","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-09-05 06:33:38","updated":"2025-06-04 09:03:01","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/category\/react-native\/\" title=\"React Native\">React Native<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tReact Native Tutorial: Getting to Know React Query\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.bagi2info.com\/en\/"},{"label":"React Native","link":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/"},{"label":"React Native Tutorial: Getting to Know React Query","link":"https:\/\/www.bagi2info.com\/en\/react-native-tutorial-getting-to-know-react-query\/"}],"_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}]}}