How to access user's fields on FE from child table

I have User and BusinessDetails tables in my app and they have a one to one relationship:

entity User {=psl
  id                        Int             @id @default(autoincrement())

  businessDetails           BusinessDetails?
psl=}

entity BusinessDetails {=psl
  id                        Int             @id @default(autoincrement())

  business                  User            @relation(fields: [businessId], references: [id])
  businessId                Int             @unique

  subscriptionStatus        String?                       
psl=}

entity User {=psl
  id                        Int             @id @default(autoincrement())

  businessDetails           BusinessDetails?
psl=}

entity BusinessDetails {=psl
  id                        Int             @id @default(autoincrement())

  business                  User            @relation(fields: [businessId], references: [id])
  businessId                Int             @unique

  subscriptionStatus        String?                       
psl=}

On frontend we access only user's entity fields and no fields from tables which have dependencies on user table, is there a way to see subscriptionStatus on frontend with following db structure?

5 Replies

kapa.ai•3mo ago

Hi @abehod. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can access the subscriptionStatus field from the BusinessDetails entity on the frontend. You would need to include the BusinessDetails entity in your query. However, the knowledge sources provided do not contain a direct example of how to do this in Wasp. You would typically use a findMany or findOne query and include the related BusinessDetails entity in the include option of the query. Here is a general example of how you might structure the query:

export const getUserWithBusinessDetails = async ({ args, context }) => {
  if (!context.user) {
    throw new HttpError(401);
  }
  return context.entities.User.findMany({
    where: {
      id: context.user.id
    },
    include: {
      businessDetails: true
    }
  });
};

export const getUserWithBusinessDetails = async ({ args, context }) => {
  if (!context.user) {
    throw new HttpError(401);
  }
  return context.entities.User.findMany({
    where: {
      id: context.user.id
    },
    include: {
      businessDetails: true
    }
  });
};

This query would return the User entity along with its related BusinessDetails entity for the currently authenticated user. You could then access the subscriptionStatus field from the BusinessDetails entity on the frontend. Please refer to the Wasp documentation (https://wasp-lang.dev/docs) for more information on how to structure queries and include related entities. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @abehod, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

abehod•3mo ago

Oh, sorry forgot to mention that I wanna access user.businessDetails.subscriptionStatus where businessDetails is a table which has fk with user as useAuth hook result on frontend, is there a way to do that? @kapa.ai Oh, sorry forgot to mention that I wanna access user.businessDetails.subscriptionStatus where businessDetails is a table which has fk with user as useAuth hook result on frontend, is there a way to do that?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useAuth hook in Wasp provides access to the authenticated user's data. However, based on the provided knowledge sources, it doesn't directly support fetching related entities like BusinessDetails in your case. To access the subscriptionStatus from the BusinessDetails table, you would need to create a custom query or action in your Wasp code that fetches the user along with their related BusinessDetails. This query or action would then need to be called from your frontend code. Here's a general example of how you might structure the query:

export const getUserWithBusinessDetails = async ({ args, context }) => {
  if (!context.user) {
    throw new HttpError(401);
  }
  return context.entities.User.findUnique({
    where: {
      id: context.user.id
    },
    include: {
      businessDetails: true
    }
  });
};

export const getUserWithBusinessDetails = async ({ args, context }) => {
  if (!context.user) {
    throw new HttpError(401);
  }
  return context.entities.User.findUnique({
    where: {
      id: context.user.id
    },
    include: {
      businessDetails: true
    }
  });
};

Then, in your frontend code, you would call this query or action to get the user along with their BusinessDetails. Please note that this is a general example and might need adjustments based on your exact use case and Wasp application structure. For more information on how to structure queries and include related entities, please refer to the Wasp documentation (https://wasp-lang.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @abehod, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•3mo ago

Oh, yeah, we don't support yet you including extra fields in the AuthUser entity on the FE when you use the useAuth hook. Sorry about that. You should create an additional query which fetches the businessDetails for a certain User ID and then fetch it when you have the AuthUser from the useAuth hook. @kapa.ai can you provide an example of that?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can create a new query in your main.wasp file that fetches the BusinessDetails for a specific user. Here's an example:

query getUserBusinessDetails {
  fn: import { getUserBusinessDetails } from "@src/server/queries.js",
  entities: [User, BusinessDetails]
}

query getUserBusinessDetails {
  fn: import { getUserBusinessDetails } from "@src/server/queries.js",
  entities: [User, BusinessDetails]
}

Then, in your queries.js file, you would implement the getUserBusinessDetails function:

export const getUserBusinessDetails = async ({ userId }, context) => {
  if (!context.user) {
    throw new HttpError(401);
  }

  return context.entities.User.findUnique({
    where: { id: userId },
    include: { businessDetails: true }
  });
};

export const getUserBusinessDetails = async ({ userId }, context) => {
  if (!context.user) {
    throw new HttpError(401);
  }

  return context.entities.User.findUnique({
    where: { id: userId },
    include: { businessDetails: true }
  });
};

In your frontend code, you would first use the useAuth hook to get the authenticated user, and then call the getUserBusinessDetails query with the user's ID:

import { useAuth } from 'wasp/client/auth';
import { useQuery } from 'react-query';
import { getUserBusinessDetails } from 'wasp/client/queries.js';

export function SomeComponent() {
  const { data: user } = useAuth();
  
  const { data: userWithBusinessDetails } = useQuery(
    ['getUserBusinessDetails', { userId: user.id }],
    getUserBusinessDetails
  );

  // Now you can access userWithBusinessDetails.businessDetails.subscriptionStatus
}

import { useAuth } from 'wasp/client/auth';
import { useQuery } from 'react-query';
import { getUserBusinessDetails } from 'wasp/client/queries.js';

export function SomeComponent() {
  const { data: user } = useAuth();
  
  const { data: userWithBusinessDetails } = useQuery(
    ['getUserBusinessDetails', { userId: user.id }],
    getUserBusinessDetails
  );

  // Now you can access userWithBusinessDetails.businessDetails.subscriptionStatus
}

Please note that this is a general example and might need adjustments based on your exact use case and Wasp application structure. For more information on how to structure queries and include related entities, please refer to the Wasp documentation (https://wasp-lang.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

How to access user's fields on FE from child table