Is this considered good practice?

Hey! I have a createResource that only runs when

params.id

params.id

and

isEditMode

isEditMode

are active. My question. Is this considered a good practice?

My component has 2 modes. Create and Editing. I'm trying to combine both into one view. Is it good practice to create 2 api fetches from a

createResource

createResource

and conditionally handle what the output is in a

createEffect

createEffect

?

I would love some feedback on the code below and maybe explain if this is a good approach.

The goal is, if your in editMode it skips fetching products, but requires to fetch schedules, so you at least have a schedule to attach your new product too. Otherwise, if you're editing a product, I want to fetch both and then include all the product data into the fields by default.

function Component(props: ComponentProps) {
  const [fields, setField] = createStore(initialValues)
  const [supabaseData] = createResource<Product>(
    () => [params.id, isEditMode],
    async () => {
      const product = isEditMode ? await getProduct(params.id) : undefined
      const schedules = await getSchedules<Schedule>(
        user?.user_metadata?.tenant_id,
      )

      return { product, ...schedules }
    },
  )

  const loading = () => supabaseData.loading

  createEffect(() => {
    if (loading()) return
    const { product, schedules }: { product: Product; schedules: Schedule[] } =
      supabaseData()

    setFields(product || defaultProductData)
    setProductName(product?.product_name)

    const hasSchedules = product?.schedule_id === null && schedules.length > 0

    setSchedules(schedules)

    if (hasSchedules) {
      setValues({ schedule_id: schedules[0].schedule_id })
    }
  })

  return (
    // Something
  )
}

function Component(props: ComponentProps) {
  const [fields, setField] = createStore(initialValues)
  const [supabaseData] = createResource<Product>(
    () => [params.id, isEditMode],
    async () => {
      const product = isEditMode ? await getProduct(params.id) : undefined
      const schedules = await getSchedules<Schedule>(
        user?.user_metadata?.tenant_id,
      )

      return { product, ...schedules }
    },
  )

  const loading = () => supabaseData.loading

  createEffect(() => {
    if (loading()) return
    const { product, schedules }: { product: Product; schedules: Schedule[] } =
      supabaseData()

    setFields(product || defaultProductData)
    setProductName(product?.product_name)

    const hasSchedules = product?.schedule_id === null && schedules.length > 0

    setSchedules(schedules)

    if (hasSchedules) {
      setValues({ schedule_id: schedules[0].schedule_id })
    }
  })

  return (
    // Something
  )
}

Is this considered good practice?

Hey! I have a createResource that only runs when

params.id

params.id

and

isEditMode

isEditMode

createResource

createResource

and conditionally handle what the output is in a

createEffect

createEffect

function Component(props: ComponentProps) {
  const [fields, setField] = createStore(initialValues)
  const [supabaseData] = createResource<Product>(
    () => [params.id, isEditMode],
    async () => {
      const product = isEditMode ? await getProduct(params.id) : undefined
      const schedules = await getSchedules<Schedule>(
        user?.user_metadata?.tenant_id,
      )

      return { product, ...schedules }
    },
  )

  const loading = () => supabaseData.loading

  createEffect(() => {
    if (loading()) return
    const { product, schedules }: { product: Product; schedules: Schedule[] } =
      supabaseData()

    setFields(product || defaultProductData)
    setProductName(product?.product_name)

    const hasSchedules = product?.schedule_id === null && schedules.length > 0

    setSchedules(schedules)

    if (hasSchedules) {
      setValues({ schedule_id: schedules[0].schedule_id })
    }
  })

  return (
    // Something
  )
}

function Component(props: ComponentProps) {
  const [fields, setField] = createStore(initialValues)
  const [supabaseData] = createResource<Product>(
    () => [params.id, isEditMode],
    async () => {
      const product = isEditMode ? await getProduct(params.id) : undefined
      const schedules = await getSchedules<Schedule>(
        user?.user_metadata?.tenant_id,
      )

      return { product, ...schedules }
    },
  )

  const loading = () => supabaseData.loading

  createEffect(() => {
    if (loading()) return
    const { product, schedules }: { product: Product; schedules: Schedule[] } =
      supabaseData()

    setFields(product || defaultProductData)
    setProductName(product?.product_name)

    const hasSchedules = product?.schedule_id === null && schedules.length > 0

    setSchedules(schedules)

    if (hasSchedules) {
      setValues({ schedule_id: schedules[0].schedule_id })
    }
  })

  return (
    // Something
  )
}

Is this considered good practice?

Similar Threads

Is this considered good practice?

Similar Threads

Similar Threads

Similar Threads