Run page load on url SearchParam which may or may not exist

[yashh]

export const load = (({ fetch, url }) => {
    const fetchSearch = async () => {
        let searchQuery = url.searchParams.get('q')
        if (searchQuery !== null) {
            const res = await fetch(`/api/v1/search/${searchQuery}`, {
                method: 'GET',
            });
            if (res.ok == false) {
                return {}
            } else {
                return await res.json()
            }
        } else {
            return {}
        }
    }

    return fetchSearch()
}) satisfies PageLoad;```

The +page.svelte works properly when a search query exists and returns data. But when the search query does not exist I am seeing issues with the way svelte store works. The store variable reports empty (null) when it should not be. What is the proper return value of a load so that data / $props() in +page.svelte will be null and proceed with rendering?

[gterras]

Seems like some info is missing here, this is a universal load right? The store you mention doesn't appear in your example but I suppose it expect an object?

I would add a try/catch on the API call to be safe, also your if (searchQuery !== null) is risky considering it will accept undefined and empty strings, better replace it with if ((searchQuery ?? '').length) or at the very least if (searchQuery != null) (so that it includes undefined).

[yashh]

import { browser } from "$app/environment";
import { api } from '$lib/utils/wretch';

function fetchUserFromApi() {
    return api.url("/me").get().catch(error => {
        if (error.response.status === 401) return null;
        throw error;
    });
}

export const user_store = writable(null);

export function fetchUser() {
    if (!browser) {
        return store;
    }

    fetchUserFromApi().then(user => {
        user_store.set(user);
    }).catch(error => {
        console.error("Error fetching user:", error);
    });

    return user_store;
}

fetchUser()

export function logout() {
    user_store.set(null);
}

This is the user store I am using. I m not sure if this is the ideal way but my intention is to query the /me endpoint everytime to check if the user is logged in. So the issue is when we render the svelte route with proper q param everything works. But when there is no parameter the user_store reports null and causes all sorts of issues. Based on the screenshot the user fetching is happening later.

[yashh]

So I am coming to the realization that user_store is null initially and fetchUser completes async which sets the user_store later. So the best solution here is to adapt my code to accept user_store can be null and once the user_store is populated its rendering the page properly.

Only bummer is if I want to check if user is not authenticated and redirect to /login its going to be hard. As the initial store value is null and then comes back right.