Is your feature request related to a problem? Please describe. We

Here the use case: <div class="highlight highlight-source-tsx notranslate position

Added a section for a custom hook to the docs: <a href="https://resthooks.io/docs/guid

Provide a param to useResource or a new hook to fetch a resource without using Suspense,about reactive/data-client

Comments (6)

ntucker commented on May 12, 2024

Hmm, would it be possible to show me how your components are setup? Even if it gets awkward it's often possible to inject suspense almost anywhere by adding a component indirection layer.

If I get a clear hurdle case here at the very least I can outline some solutions in the docs.

from data-client.

christophehurpeau commented on May 12, 2024

Here the use case:

export default function AccountManagerSelect({
  onSave,
}: AccountManagerSelectProps): React.ReactElement {
  const instructor = useContext(InstructorContext);
  const accountManagers = useOneResourceWithLoadingState(AccountManagerResource.listRequest(), {});
  return (
      <Field
        name="account_manager_id"
        label="Agent de suivi"
        component={Select}
        value={instructor.account_manager_id}
        size="small"
      >
        {accountManagers.loading || accountManagers.error
          ? [
              <Select.Option
                key={`am-${instructor.account_manager.id}`}
                value={instructor.account_manager.id}
              >
                {`${instructor.account_manager.firstname} ${instructor.account_manager.lastname}`}
              </Select.Option>,
              <Select.Option key="loading" disabled>
                <Loader />
              </Select.Option>,
            ]
          : accountManagers.result.map((accountManager) => (
              <Select.Option key={`am-${accountManager.id}`} value={accountManager.id}>
                {`${accountManager.firstname} ${accountManager.lastname}`}
              </Select.Option>
            ))}
      </Field>
  );
}

from data-client.

ntucker commented on May 12, 2024

I take it this still remounts Select since OptionList is another component?

function FallbackOptions({ instructor }) {
  return [
      <Select.Option value={instructor.account_manager.id} key={`am-${instructor.account_manager.id}`}>
        {`${instructor.account_manager.firstname} ${
          instructor.account_manager.lastname
        }`}
      </Select.Option>,
      <Select.Option disabled key="loading">
        <Loader />
      </Select.Option>,
    </>
  ];
}
function OptionList() {
  const accountManagers = useResource(AccountManagerResource.listRequest(), {});
  return accountManagers.result.map(accountManager => (
    <Select.Option key={`am-${accountManager.id}`} value={accountManager.id}>
      {`${accountManager.firstname} ${accountManager.lastname}`}
    </Select.Option>
  ));
}

export default function AccountManagerSelect({
  onSave,
}: AccountManagerSelectProps): React.ReactElement {
  const instructor = useContext(InstructorContext);
  const fallback = FallbackOptions({ instructor });
  return (
    <Field
      name="account_manager_id"
      label="Agent de suivi"
      component={Select}
      value={instructor.account_manager_id}
      size="small"
    >
      <Suspense fallback={fallback}>
        <NetworkErrorBoundary fallback={fallback}>
          <OptionList />
        </NetworkErrorBoundary>
      </Suspense>
    </Field>
  );
}

What problems do you have due to remounting? Is there some componentdidmount lifecycle you look for?

from data-client.

christophehurpeau commented on May 12, 2024

Thanks, we tried some things, we'll get back to you this week

from data-client.

christophehurpeau commented on May 12, 2024

Hello,

The problem with your solution is that the Select we use come from ant design and only accepts an list of Select.Option as children.

So we tried to use the Select in both fallback and loaded but, as you can expect, the Select is now destroyed and rerendered, so it loses its open state, if we click on it. We added a state to handle this. Here is the result:

function SelectWithOptions(props: SelectProps): React.ReactElement {
  const accountManagers = useResource(AccountManagerResource.listRequest(), {});
  return (
    <Select {...props}>
      {accountManagers.map((am) => (
        <Select.Option key={`am-${am.id}`} value={am.id}>
          {`${am.firstname} ${am.lastname}`}
        </Select.Option>
      ))}
    </Select>
  );
}

function FallBackSelect(props: SelectProps): React.ReactElement {
  const { account_manager } = useContext(InstructorContext);
  return (
    <Select {...props}>
      <Select.Option key={account_manager.id} value={account_manager.id}>
        {`${account_manager.firstname} ${account_manager.lastname}`}
      </Select.Option>
    </Select>
  );
}

function SelectWithSuspense(props: SelectProps): React.ReactElement {
  const [open, setOpen] = useState(false);
  const selectProps = {
    ...props,
    open,
    onDropdownVisibleChange: (opened: boolean) => setOpen(opened),
  };
  return (
    <Suspense fallback={<FallBackSelect {...selectProps} />}>
      <SelectWithOptions {...selectProps} />
    </Suspense>
  );
}

It works :)

from data-client.

ntucker commented on May 12, 2024

Added a section for a custom hook to the docs: https://resthooks.io/docs/guides/no-suspense

from data-client.

Provide a param to useResource or a new hook to fetch a resource without using Suspense about data-client HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent