Closed
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
[skip envinfo]
{
"private": true,
"main": "./app-entry.js",
"scripts": {
"dev": "expo start",
"prod": "expo start --no-dev"
},
"dependencies": {
"expo": "^31.0.2",
"react": "^16.7.0-alpha.2",
"react-cache": "^2.0.0-alpha.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-31-with-hooks-dangerzone.tar.gz"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"expo-cli": "^2.6.12"
}
}
Description
When trying to use Suspense on React Native, I am receiving a Not yet implemented issue, after the react-cache package has resolved the data.
Reproducible Demo
import React, { useState, ConcurrentMode, Suspense } from "react";
import { StyleSheet, SafeAreaView, Button, Text } from "react-native";
import { unstable_createResource as createResource } from "react-cache";
const myPokemon = createResource(function fetchPokemon(name) {
const pokemonQuery = `
query ($name: String) {
pokemon(name: $name) {
id
number
name
}
}
`;
return fetch("https://graphql-pokemon.now.sh", {
method: "POST",
headers: {
"content-type": "application/json;charset=UTF-8"
},
body: JSON.stringify({
query: pokemonQuery,
variables: { name }
})
})
.then(r => r.json())
.then(response => response.data.pokemon);
});
function PokemonInfo({ pokemonName }) {
const pokemon = myPokemon.read(pokemonName);
console.log(pokemon);
return <Text>{JSON.stringify(pokemon || "Unknown", null, 2)}</Text>;
}
export default function App() {
const [pokemonName, setPokemonName] = useState(null);
const [search, setSearch] = useState(false);
return (
<SafeAreaView style={styles.container}>
<Button title="Get Pikachu" onPress={() => setPokemonName("Pikachu")} />
{pokemonName ? (
<Suspense fallback={<Text>loading...</Text>}>
<PokemonInfo pokemonName={pokemonName} />
</Suspense>
) : null}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
flex: 1,
margin: 20
},
textInput: {
backgroundColor: "#eaeaea",
borderColor: "#cccccc",
borderWidth: 1,
height: 40,
padding: 10
}
});