How to refresh queries using JS?

Plasmic Studio Questions
1

Just a simple question, how to refresh my queries using javascript? Thanks

2

Hi @anderson_pena

Could you please share a complete example/scenario of what you are trying to achieve?

Thanks

3

Sure.
So I want to setup a websocket with javascript, and whenever my backend data is updated, it will send a message to the client to refresh the data

4

To be more specific, here is the database listener, it works. I just need to know how refresh the data using javascript

const script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/@supabase/supabase-js";
document.head.appendChild(script);

script.onload = () => {
    console.log("Supabase loaded!");

    const supabaseUrl = 'MyURL';
    const supabaseAnonKey = 'MyKey';

    const supabase = window.supabase.createClient(supabaseUrl, supabaseAnonKey);

    function startDatabaseListener(callback) {
        const subscription = supabase
            .channel('phones')
            .on('postgres_changes', { event: '*', schema: 'public', table: 'phones' }, (payload) => {
                console.log('Change received (phones):', payload);
                if (callback) callback(payload);
            })
            .on('postgres_changes', { event: '*', schema: 'public', table: 'orders' }, (payload) => {
                console.log('Change received (orders):', payload);
                if (callback) callback(payload);
            })
            .subscribe();

        return () => {
            subscription.unsubscribe();
            console.log("Database listener unsubscribed.");
        };
    }

    const stopListener = startDatabaseListener((change) => {
        console.log("Database updated:", change);
    //Here I am going to put the function to update the data
    });

};
5

Thanks for sharing the script. Could you please share more about where this script is used?

Are you using this directly in Plasmic Studio using Embed HTML component?

6

Well, something like that. I plan to use the script on the SideEffect on the OnLoad() function

7

So once it is loaded it will listen to the changes on the database and refresh the data accordingly. Thats why Iā€™d like to know if there is a way to just refresh the data with js, something like $queries.refresh() and put it on my function

8

Hi @anderson_pena

You can use plasmicInvalidate(["plasmic_refresh_all"]) to invalidate cache for all queries on a given page. In case you want to invalidate a specific query, you can provide a Query group name from Data Queries configuration and pass it to the plasmicInvalidate function.

For example, for the following screenshot it would be plasmicInvalidate(["getAllPosts"])

image
image507Ɨ442 18.2 KB

Thanks

9

Thanks for your answer. In that case how can I define plasmicInvalidate()? When I tried to use it says is undefined

10

Hmm, it should work fine in the Preview mode. Did you receive error in the Preview mode or in Canvas?

Could you please share some screenshot for more visual feedback?

11

Actually, nevermind. Thanks a lot, it worked

1 Like