SolidJS•2y ago

Is this considered good practice?

Hey! I have a createResource that only runs when params.id and 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 and conditionally handle what the output is in a 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
  )
}

5 Replies

Alex Lohr•2y ago

I would probably parallelize both requests; using await means that the second waits for the first in edit mode. Otherwise it's fine.

CasacobraOP•2y ago

@lexlohr not quire sure what you mean by parallelize. I'm guessing separate them both? Basically when in edit mode I want both api's to run simultaneously, but maybe you're right, we may not need to await the other as it doesn't rely on the other... ?

Alex Lohr•2y ago

Instead of await a; await: b; use await Promise.all([a, b])

CasacobraOP•2y ago

nice thank you my man

Alex Lohr•2y ago

Happy to help

Gaming

Programming

Is this considered good practice?