SolidJS•2y ago

Fetching resources only when logged in

export default function Dashboard() {

    const { createToast, styles } = useToast()
    const { logged, user } = useAuth()
    const { show, hide, SaveButton } = useSaveButton()
    
    const [guildDB, { mutate }] = createResource(fetchGuildDB, { initialValue: { moderation: {}, economy: {}}})
    const [roles] = createResource(fetchRoles, { initialValue: [] })
    const [channels] = createResource(fetchChannels, { initialValue: [] })
    const [guild] = createResource(fetchGuildDetails, { initialValue: {}})
    //...
}

export default function Dashboard() {

    const { createToast, styles } = useToast()
    const { logged, user } = useAuth()
    const { show, hide, SaveButton } = useSaveButton()
    
    const [guildDB, { mutate }] = createResource(fetchGuildDB, { initialValue: { moderation: {}, economy: {}}})
    const [roles] = createResource(fetchRoles, { initialValue: [] })
    const [channels] = createResource(fetchChannels, { initialValue: [] })
    const [guild] = createResource(fetchGuildDetails, { initialValue: {}})
    //...
}

Here for example I want to fetch all those resources only when logged() === true right now it fetches every time someone navigates to that page and that results in the page freezing (clicking links/navigating doesnt work) how is this supposed to be handled?

1 Reply

KokoNeot•2y ago

Same here

function UserData({ params, location, navigate, data }) {
    // const { logged } = useAuth()
    // console.log(logged())
    // if (logged() === false) return { userDB: () => {}, playlists: () => [] }

    const [userDB] = createResource(fetchUserDB, { initialValue: { timeObj: {}, jobObj: {}}})
    const [playlists, { mutate }] = createResource(fetchPlaylists, { initialValue: [] })
    
    return { userDB, playlists, mutatePlaylists: mutate }
}

function UserData({ params, location, navigate, data }) {
    // const { logged } = useAuth()
    // console.log(logged())
    // if (logged() === false) return { userDB: () => {}, playlists: () => [] }

    const [userDB] = createResource(fetchUserDB, { initialValue: { timeObj: {}, jobObj: {}}})
    const [playlists, { mutate }] = createResource(fetchPlaylists, { initialValue: [] })
    
    return { userDB, playlists, mutatePlaylists: mutate }
}

this was my attempt at route data function but it doesnt work as intended because initially logged is === to null, the AuthContext makes an api call to check if user is logged or not and then its set to true or false but the data function doesnt rerun

Gaming

Programming

Fetching resources only when logged in