export default defineComponent({
  setup() {
    // Create a controller that handles the component state and its entry
    const controller = TFetchEntryController.create<Person>({
      // This callback is triggered every time the 'fetch' method is called
      onFetch: async () => {
        const response = await fetchFromServer();
        return {
          // Return an entry object or error message
          entry: response,
        };
      },
      // Build the entry component and style it anyway you like
      builder: ({ entry }) => {
        return <TText>{entry.first}</TText>;
      },
    });

    const onClick = async () => {
      // Use class methods to fetch entry
      await controller.fetch();

      // Or manually mutate the component state to replace entry
      // controller.replace({ fullName: 'My full name' });
      // controller.replace(undefined);
    };

    return () => (
      <>
        <TFetchEntry controller={controller} />

        <TButton onClick={onClick}>Refresh</TButton>
      </>
    );
  },
});