14 replies

Trying to get a loader working correctly

I'm trying to setup logic in my front end to show skeleton loaders when a page is loading on a query, but I'm not sure the best practice

right now my query looks like this

export const getUserPlans = query({
  handler: async (ctx) => {
    const userId = await getUserId(ctx);

    if (!userId) {
      return {
        error: 'no user id was found',
      };
    }

    return await ctx.db
      .query('plans')
      .withIndex('by_userId', (q) => q.eq('userId', userId))
      .collect();
})

export const getUserPlans = query({
  handler: async (ctx) => {
    const userId = await getUserId(ctx);

    if (!userId) {
      return {
        error: 'no user id was found',
      };
    }

    return await ctx.db
      .query('plans')
      .withIndex('by_userId', (q) => q.eq('userId', userId))
      .collect();
})

and in the front end I do something like this

  const plans = useQuery(api.plans.queries.getUserPlans);

if (isError(plans) || plans === undefined) {
  return <Loader />
}

  const plans = useQuery(api.plans.queries.getUserPlans);

if (isError(plans) || plans === undefined) {
  return <Loader />
}

but I'm seeing some behavior where the convex endpoint is invoked before the user is actually authenticated, so it returns the error. I'm wondering if there is a better way to setup the front end to never invoke my convex backend until my auth is all 100% setup

Convex Community•3y ago•

14 replies

Web Dev Cody

Trying to get a loader working correctly

I'm trying to setup logic in my front end to show skeleton loaders when a page is loading on a query, but I'm not sure the best practice

right now my query looks like this

export const getUserPlans = query({
  handler: async (ctx) => {
    const userId = await getUserId(ctx);

    if (!userId) {
      return {
        error: 'no user id was found',
      };
    }

    return await ctx.db
      .query('plans')
      .withIndex('by_userId', (q) => q.eq('userId', userId))
      .collect();
})

export const getUserPlans = query({
  handler: async (ctx) => {
    const userId = await getUserId(ctx);

    if (!userId) {
      return {
        error: 'no user id was found',
      };
    }

    return await ctx.db
      .query('plans')
      .withIndex('by_userId', (q) => q.eq('userId', userId))
      .collect();
})

and in the front end I do something like this

  const plans = useQuery(api.plans.queries.getUserPlans);

if (isError(plans) || plans === undefined) {
  return <Loader />
}

  const plans = useQuery(api.plans.queries.getUserPlans);

if (isError(plans) || plans === undefined) {
  return <Loader />
}

Trying to get a loader working correctly

Similar Threads

Trying to get a loader working correctly

Similar Threads

Similar Threads

Similar Threads