Is there a system action to save user data locally?

[Jonah]

I'm loving hyperview, but have a few questions. Please let me know if there is a better place to ask (eg, I'm on the htmx discord).

1. How can I store user data locally on the device -- eg, in UserDefaults on ios? The natural way seems to be system actions, but the only two I found docs for were "alert" and "share". Would I need to implement a custom action for storing local data?
2. What about caching large responses? Can I just assume all the features of http caching will work as normal (etags, if-modified, etc)? If not, what approach is recommended?

Thanks!

EDIT:

3. What about integrating 3rd party libraries -- we use embrace.io for analytics, as an example. Would that be done via a custom element?
   • A bit more context: How would you implement a typical login system, where a user should stay logged in indefinitely, and where API requests that a logged in user makes should include an Authorization header, populated with a token saved locally.

[Adam Stepinski]

Hi @jonahx, I'll try to answer your questions inline:

1. How can I store user data locally on the device -- eg, in UserDefaults on ios? The natural way seems to be system actions, but the only two I found docs for were "alert" and "share". Would I need to implement a custom action for storing local data?

Can you give an example of what you are trying to achieve by storing data locally? Presumably, you'd need a way to save and retrieve that data, so my suggestions would depend on the behavior you want to implement.

2. What about caching large responses? Can I just assume all the features of http caching will work as normal (etags, if-modified, etc)? If not, what approach is recommended?

Yes, HTTP responses are cached at the system level using etags, if-modified, max-age, etc. We are working on an extension to support offline caching as well based on stale-if-error and stale-while-revalidate directives.

3. What about integrating 3rd party libraries -- we use embrace.io for analytics, as an example. Would that be done via a custom element?

I suggest integrating analytics libraries using custom behavior actions. That way, you can trigger an analytics event based on different types of user interactions (press a button, view a screen, etc). Here's an example of how to integrate Amplitude, I imagine using embrace.io would be similar: https://hyperview.org/docs/reference_custom_behaviors#event-logging

• A bit more context: How would you implement a typical login system, where a user should stay logged in indefinitely, and where API requests that a logged in user makes should include an Authorization header, populated with a token saved locally.

Ah, having a concrete example helps here. This is actually how we implement login in the Instawork app. We leverage a few things:

• We use https://github.com/react-native-async-storage/async-storage for locally storing the login token. This library can be wrapped with a simple custom action to store the token in a given key.
• the Hyperview RN component takes an implementation of the fetch() API as a prop. By default, we use the default fetch() function that comes with RN. However, you can wrap this function and inject the token as the Auth header. Simple pseudo-example:

function myFetch = async (input, init) {
    const token = await AsyncStorage.get('auth-token');  // Retrieve token in async storage, could be null if not logged in
    const fetchHeaders = {
        ...init.headers,
        Authorization: token,  // Add Authorization header to request headers
    };
    return fetch(input, { ...init, headers: fetchHeaders });  // Make request using the system fetch() API, but pass our modified headers
};

Hope that helps!

[Jonah]

That helps a lot! Thanks Adam.