Ad
Apollo Client Returning Undefined In Initial Reload In React Native
I'm trying to fetch some data from my cache. In initial reload data prop returns undefined but if I fast reload the app (react native fast reload) data prop has the value I want. I can not understand why it is returning undefined in initial reload. One case might be I'm calling the query before the cache is initialised. I have consoled the local cache and it shows values but the query is retuning undefined.
My client setup in 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;
My initialState.js
export default {
language: 'bd'
};
My 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);
My query
export const getLangQuery = gql`
query getLang {
language @client
}
`;
I'm trying to get the data like this in my root page.
const { loading, error, data } = useQuery(getLangQuery);
const [setLanguage, result] = useMutation(setLangQuery);
const language = data;
console.log(language);
Ad
Answer
I figure it out myself. I was initialising the persistCache
multiple time.Once in client.js and once in index.js. Thats why it was behaving weirdly. Now Everything is behaving as expected.
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad