Start2Panic Comments - Answer Overflow

Start2Panic

•Created by Start2Panic on 5/17/2024 in #🙋questions

white screen, how to debug?

Just to be sure I recreated the issue. When having the const jobs hook before the export I get an all white page:

const { data: jobs, isLoading: isJobsLoading, error } = useQuery(getJobs);

export default function JobPage() {

  const history = useHistory();

  return (

const { data: jobs, isLoading: isJobsLoading, error } = useQuery(getJobs);

export default function JobPage() {

  const history = useHistory();

  return (

The browser console hints the error:

react.development.js:209 
 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

react.development.js:209 
 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

14 replies

WWasp-lang

•Created by Start2Panic on 5/14/2024 in #🙋questions

Context entities in a query

Thanks all for the advice. After some hours of 🤔 I finally found that my query was missing the void part...

//export const getJobs: GetJobs<(Job & { user: User })[]> = async (args, context): Promise<Job[]> => { THIS IS WRONG
export const getJobs: GetJobs<void, (Job & { user: User })[]> = async (_args, context) => { //
  return context.entities.Job.findMany({
    orderBy: { id: 'asc' },
    include: {
      user: true,
    },
  });
};

//export const getJobs: GetJobs<(Job & { user: User })[]> = async (args, context): Promise<Job[]> => { THIS IS WRONG
export const getJobs: GetJobs<void, (Job & { user: User })[]> = async (_args, context) => { //
  return context.entities.Job.findMany({
    orderBy: { id: 'asc' },
    include: {
      user: true,
    },
  });
};

13 replies

WWasp-lang

•Created by Start2Panic on 5/17/2024 in #🙋questions

white screen, how to debug?

I had a const outside the export function 🤫

14 replies

WWasp-lang

•Created by Start2Panic on 5/17/2024 in #🙋questions

white screen, how to debug?

Found it via Development Tools Console Log!

14 replies

WWasp-lang

•Created by Start2Panic on 5/14/2024 in #🙋questions

Context entities in a query

Hey @kapa.ai , These are my JobsView and JobsList, how do I pass the user data to the JobsView from the JobsList? const JobsView = ({ job }: { job: Job }) => { var formattedCreatedAt = job.createdAt.toISOString(); // Example format: "2024-05-10T09:55:24.000Z"
var Urgent = job.isUrgent ? 'Yes' : 'No'; var Status = job.isDone ? 'Done' : 'Open'; return ( <tr className={Urgent === 'Yes' ? 'border-b border-red-200 bg-red-100' : 'text-neutral-800 border-b dark:border-neutral-500'}> <td className="whitespace-nowrap px-6 py-4 font-medium">{job.id}</td> <td className="whitespace-nowrap px-6 py-4">{job.description}</td> <td className="whitespace-nowrap px-6 py-4">{formattedCreatedAt}</td> <td className="whitespace-nowrap px-6 py-4">{job.userId}</td> <td className="whitespace-nowrap px-6 py-4">{Status}</td> <td className={Urgent === 'Yes' ? 'bg-red-500 whitespace-nowrap px-6 py-4"' : 'whitespace-nowrap px-6 py-4"'} >{Urgent}</td> <td className="whitespace-nowrap px-6 py-4"> </td>
</tr> ); }; const JobsList = ({ jobs }: { jobs: Job[] }) => { if (!jobs?.length) return <div>No Jobs</div> return ( <tbody> {jobs.map((job, idx) => ( <JobsView job={job} key={idx} /> ))} </tbody> ) }

13 replies

WWasp-lang

•Created by Start2Panic on 5/14/2024 in #🙋questions

Context entities in a query

Hey @kapa.ai In the frontend I call JobList in a table: <table className="min-w-full text-left text-sm font-light"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="px-6 py-4">#</th> <th scope="col" className="px-6 py-4">Descrption</th> <th scope="col" className="px-6 py-4">Created on</th> <th scope="col" className="px-6 py-4">Created by</th> <th scope="col" className="px-6 py-4">Status</th> <th scope="col" className="px-6 py-4">Urgent</th> <th></th> </tr> </thead> {jobs && <JobsList jobs={jobs} />} {isLoading && 'Loading...'} {error && 'Error: ' + error} </table> This JobList returns the table body of jobs : const JobsList = ({ jobs }: { jobs: Job[] }) => { if (!jobs?.length) return <div>No Jobs</div> return ( <tbody> {jobs.map((job, idx) => ( <JobsView job={job} key={idx} /> ))} </tbody> ) }

13 replies

Gaming

Programming