javascript - 阿波罗客户端在反应原生的初始重新加载中返回未定义
问题描述
我正在尝试从我的缓存中获取一些数据。在初始重新加载数据道具返回未定义但如果我快速重新加载应用程序(反应本机快速重新加载)数据道具具有我想要的值。我不明白为什么它在初始重新加载时返回未定义。一种情况可能是我在缓存初始化之前调用查询。我已经控制了本地缓存,它显示了值,但查询正在重新调整未定义。
我在 client.js 中的客户端设置
const dev = {
base_url: BASE_URL
};
const httpLink = createHttpLink({
uri: dev.base_url
});
const errorLink = onError(({ graphQLErrors, networkError, response }) => {
if (graphQLErrors) {
// do something with graphql error
console.log(graphQLErrors);
}
if (networkError) {
// do something with network error
console.log(networkError);
// console.log('network not available');
}
if (response) {
console.log(response);
}
});
const cache = new InMemoryCache();
const setupPersistedCache = async () => {
const persistor = new CachePersistor({
cache,
storage: AsyncStorage
});
// Read the current schema version from AsyncStorage.
const currentVersion = await AsyncStorage.getItem(SCHEMA_VERSION_KEY);
console.log('currentVersion', currentVersion);
if (currentVersion && currentVersion === SCHEMA_VERSION) {
// If the current version matches the latest version,
// we're good to go and can restore the cache.
console.log('not migrating cache');
await persistor.restore();
} else {
// Otherwise, we'll want to purge the outdated persisted cache
// and mark ourselves as having updated to the latest version.
console.log('migrating cache');
await persistor.purge();
await AsyncStorage.setItem(SCHEMA_VERSION_KEY, SCHEMA_VERSION);
cache.writeData({
data: {
...initialState
}
});
await persistCache({
cache,
storage: AsyncStorage,
debug: true
});
}
// console.log(cache.data);
};
setupPersistedCache();
const link = ApolloLink.from([errorLink, httpLink]);
const client = new ApolloClient({
defaults: initialState,
link,
cache,
resolvers
});
export default client;
我的 initialState.js
export default {
language: 'bd'
};
我的 index.js
const AppProvider = () => {
const [loaded, setLoaded] = useState(false);
const configureCache = async () => {
try {
const cache = new InMemoryCache();
await persistCache({
cache,
storage: AsyncStorage,
debug: true
});
console.log(cache.data);
} catch (error) {
console.error('Error restoring Apollo cache', error);
}
};
useEffect(() => {
configureCache()
.then(() => {
setLoaded(true);
})
.catch(() => {
setLoaded(false);
});
}, []);
useEffect(() => {
SplashScreen.hide();
}, []);
return (
<>
{loaded ? (
<ApolloProvider client={client}>
<Root />
</ApolloProvider>
) : (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<TextComponent
content="Loading"
size={fonts.fs24}
family={fonts.medium}
color={colors.white}
/>
</View>
)}
</>
);
};
AppRegistry.registerComponent(appName, () => AppProvider);
我的查询
export const getLangQuery = gql`
query getLang {
language @client
}
`;
我试图在我的根页面中获取这样的数据。
const { loading, error, data } = useQuery(getLangQuery);
const [setLanguage, result] = useMutation(setLangQuery);
const language = data;
console.log(language);
解决方案
data
最初总是未定义的,即使结果是从缓存而不是服务器获取的。一旦数据被加载,它就保持在组件状态,因此即使组件重新渲染,也不必再次从缓存中获取数据。快速刷新只会触发重新渲染——它不会重新加载你的整个应用程序——所以任何组件状态,包括data
在这种情况下,都会被持久化。
推荐阅读
- python - Pyspark - 从具有数组字段的列表列表创建 DataFrame
- android - Android 视频视图 - 无法播放此视频 - 内部存储
- macos - 如何在新音乐应用 (MacOS Catalina) 中打开 Apple Music (iTunes) 链接
- javascript - AngularJS 未定义
- netsuite - 使用 SuiteScript 2.0 更新 Netsuite 中的自定义地址字段
- stack - stm32f070rbt6 堆栈指针无效地址问题
- docker - 找不到类“Twig_Function”
- excel - FormulaR1C1 sumIF 删除重复项 + 连接
- ios - Xamarin Native 中具有部分布局问题的 UICollectionView
- java - 通知未显示