https://supabase.com/ logo
Powered by
Only query data for one time (SvelteKit + Supabase)
c

Cokaps016

05/25/2023, 3:40 AM
Currently Im querying data on each page which is may slow the website and take more Database size. So is there a way to do this, like when you first open the website (any pages) and then it query data from supabase table. When you open other pages of the same web, it will use the data that is queried before. (Like for example: if (!tableData) {const { data: data, error } = await supabase.from('main').select('*'); tableData = data } return tableData;) I’m thinking about using this script for +layout.server.ts but not really sure if this will query multiple times or not Sorry for my bad english :((
j

Jason Creviston

05/25/2023, 12:04 PM
If you put it in +layout.server.ts, there would be times when it gets queried again. Still better than on every page.
You could also think about using a svelte store. In layout.server.ts, you could check for a store value, and if it's not there you can do your query and then set the value of the store with the returned data. Then either do your 
return tableData
or just use the store in whatever page you need it. What kind of data is this? Would it have user data?
c

Cokaps016

05/25/2023, 12:12 PM
No it just have a bunch of normal data
i.e. [{ push_up:”10”, run:”3”},{push_up:”3”, run: “3”}]
j

Jason Creviston

05/25/2023, 12:16 PM
Gotcha. You could definitely use a standard svelte store. If this data ever had to be different for different users, then you'd probably want to "secure" the store with svelte's context api.
c

Cokaps016

05/26/2023, 2:45 AM
ts
import { writable } from 'svelte/store';
import { supabase } from '$lib/supabaseClient';
// import Type {Database} from '../DatabaseDefinitions.d.ts'
// TODO: DATABASE Type
// let supabaseData: object[] = writable([]);
let supabaseData = writable([]);
if (!supabaseData) {
    const { data: data, error } = await supabase.from('main').select('*');
    data.sort((a: any, b: any) => b.id - a.id);
    supabaseData = data;
    // console.log('1:', supabaseData);
    // console.log('2:', data);
}
export { supabaseData };
So this is my $lib/supabaseData.ts
And here is my src/routes/test/+page.server.ts:
ts
import { supabase } from '$lib/supabaseClient';
import type { PageServerLoad } from './$types';
import { supabaseData } from '$lib/supabaseData';

export const load: PageServerLoad = async ({ locals: { getSession } }) => {
    const session = await getSession();
    console.log(session);
    let dates;
    console.log(dates);
    supabaseData.subscribe((value) => {
        dates = value ?? [];
    });

    console.log(dates);
    // const { data: data, error } = await supabase.from('main').select('*');
    return {
        dates,
        session:
            session &&
            (session.user.email == 'sb@gmail.com' ||
                session.user.email == 'some@gmail.com' ||
                session.user.email == 's@gmail.com'),
        // lhsData: dataLHS ?? [],
    };
    // if (session) {
    //     throw redirect(303, '/account');
    // }

    // return { url: url.origin };
};
So Im trying to use svelte store but it doesn't work, any ideas on this issue
j

Jason Creviston

05/26/2023, 10:26 AM
Is your query returning data?
c

Cokaps016

05/26/2023, 11:24 AM
I mean if this whole file is run, data should be queried (cuz with the same code: await supabase.from(…).select(‘*’) work in +page.server.ts)
j

Jason Creviston

05/26/2023, 11:36 AM
But is it? I see you have some console logs commented out in supabaseData.ts. Do those log anything?
In that file it should be 
supabaseData.set(data)
. https://svelte.dev/docs#run-time-svelte-store-writable I was thinking you can just do 
const { data, error } = await supabase.from('main').select('*');
, without the 
data:
https://supabase.com/docs/reference/javascript/select
c

Cokaps016

05/26/2023, 4:47 PM
Hmm I check console.log but there is nothing there (like those console.log doesn't even run no 
1:
or 
2:
as well)
j

Jason Creviston

05/26/2023, 7:00 PM
Just checking here: you did uncomment them, correct?
I'm not seeing where your code in 
supabaseData.ts
even runs. You're just exporting the store. What you might consider is moving your Supabase query to your 
+page.server.ts
- at least for a test.
But you'd want your check to be 
if (!$supabaseData) { ... }
so that it checks for a value - although I'm not sure if that would be 
true
or 
false
with an empty array.
^ regarding the above, a svelte store will always equate to 
true
in a check like 
if (supabaseData)
, because the store exists. However, when you check 
$supabaseData
, it checks against the store's value, if any.
c

Cokaps016

05/27/2023, 2:18 AM
Hmm I move from ‘+page.server.ts’ (which works) to supabaseData.ts so Ig i don’t need to test it
May be I’ll try, thanks
#help-and-questionsJoin Discord
Powered by