Function useOptimisticCreatePost

useOptimisticCreatePost is a React Hook that mirrors the behavior of useCreatePost but it also provides an optimistic response.

This is still an experimental feature and for now the optimistic behavior is limited to posts created with Signless Experience.

You MUST be authenticated via useLogin to use this hook.

Example

const { data, execute, loading, error } = useOptimisticCreatePost(uploader);
Copy

Basic usage

To use the hook, first define an instance of the Uploader class.

In this example, we're using a Stateless Uploader. This type of uploader requires just a function that matches the UploadHandler signature. Refer to IUploader for other types of uploaders.

const uploadHandler = async (file: File) => {
  // upload the file and return the public URI
  return 'https://example.com/uploaded-file.jpg';
};
Copy

Then, create an instance of the Uploader class.

const uploader = new Uploader(uploadHandler);
Copy

Then pass the uploader to the useOptimisticCreatePost hook.

To create a post, call the execute function with the metadata. Contrary to the useCreatePost hook you can pass the whole metadata object to the execute function.

import { textOnly } from '@lens-protocol/metadata';

// ...

const { data, execute, loading, error } = useOptimisticCreatePost(uploader);

const post = (content: string) => {
  // create the desired metadata via the `@lens-protocol/metadata` package helpers
  const metadata = textOnly({ content });

  // invoke the `execute` function to create the post
  const result = await execute({
    metadata,
  });

  // check for failure scenarios
  if (result.isFailure()) {
    console.log(result.error.message);
  }
};

return (
  // render data as you would do normally with any Post object
);
Copy

The data property will be updated with the optimistic Post object immediately after the execute call.

Media Upload

The useOptimisticCreatePost hook also supports media uploads. It accomplishes this by utilizing the provided uploader to upload each media file. After the upload, it updates the supplied metadata with the public URIs of the media files, as returned by the uploader. Finally, it uploads the metadata and creates the post.

To accomplish this, simply use the local file URL as media URI in the metadata object.

When using the @lens-protocol/react-web package, you can use the fileToUri helper to convert a File object to a local file URL.

import { image } from '@lens-protocol/metadata';
import { fileToUri, useOptimisticCreatePost } from '@lens-protocol/react-web';

// ...

const post = (file: File) => {
  // create the desired metadata via the `@lens-protocol/metadata` package helpers
  const metadata = image({
    image: {
      item: fileToUri(file),
      type: MediaImageMimeType.JPEG,
    },
  });

  // invoke the `execute` function to create the post
  const result = await execute({
    metadata,
  });

  // check for failure scenarios
  if (result.isFailure()) {
    console.log(result.error.message);
  }
};
Copy

When using the @lens-protocol/react-native package, you use the property that yield a file:// URL from the file picker library of your choice.

Wait for completion

Optionally, you can wait for the full completion of the post creation. .

const post = (content: string) => {
  // create the desired metadata via the `@lens-protocol/metadata` package helpers
  const metadata = textOnly({ content });

  // invoke the `execute` function to create the post
  const result = await execute({
    metadata,
  });

  // check for failure scenarios
  if (result.isFailure()) {
    console.log(result.error.message);
  }

  // wait for full completion
  const completion = await result.value.waitForCompletion();

  // check for late failures
  if (completion.isFailure()) {
    console.log(completion.error.message);
    return;
  }

  console.log(completion.value);
};

return (
  // render data
);
Copy

At the end the data property will automatically update and the final Post object will be available for further interactions.

Failure scenarios

In case of upload error an new error type UploadError will be returned both from the error property and from the Result<T, E> object from the execute function.

const { data, execute, loading, error } = useOptimisticCreatePost(uploader);

const post = (content: string) => {
  // ...
  const result = await execute({
    metadata,
  });

  // check for failure scenarios
  if (result.isFailure()) {

    // check for upload error
    if (result.error instanceof UploadError) {
       console.log('There was an error uploading the file', result.error.cause);
       return;
    }
    // other errors handling

    return;
  }
};

return (
  {error && <p>{error.message}</p>}
  // render data
);
Copy

This API is experimental and may change or be removed in future versions without honoring semver.