AlberTenez Comments - Answer Overflow

AlberTenez

•Created by MaveriX89 on 2/4/2024 in #support

How to handle necessary async/await work inside of a createEffect?

The question coming into my mind is, if everything is client-driven, how do you securely connect to the db from the front end? Check this out: https://start.solidjs.com/core-concepts/actions and https://start.solidjs.com/core-concepts/data-loading I think will be helpful. In case you are using solid start. In case you are not using solid start, you could use createResource with and async fn https://www.solidjs.com/docs/latest/api#createresource or, you could do sth like this in a simpler way:

const refreshDoc = async (db: Database, docId = "") => {
    return db.get<T>(docId);
  };

function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
  const [doc, setDoc] = createSignal(initialDocFn());
  const [err, setError] = createSignal<Error | undefined>();
  const initialDocId = () => initialDocFn()._id;

  createEffect(() => {
    // This is the problematic instruction. How can I re-express this to properly await it?
    refreshDoc(database(), initialDocId()).then((doc) => {setDoc(doc)}).catch((err) => { setError(err) });
  });
}

const refreshDoc = async (db: Database, docId = "") => {
    return db.get<T>(docId);
  };

function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
  const [doc, setDoc] = createSignal(initialDocFn());
  const [err, setError] = createSignal<Error | undefined>();
  const initialDocId = () => initialDocFn()._id;

  createEffect(() => {
    // This is the problematic instruction. How can I re-express this to properly await it?
    refreshDoc(database(), initialDocId()).then((doc) => {setDoc(doc)}).catch((err) => { setError(err) });
  });
}

These are the options I could think of.

8 replies

SSolidJS

•Created by MaveriX89 on 2/4/2024 in #support

How to handle necessary async/await work inside of a createEffect?

This will depend on your implementation. You could use actions or createAsync with cache. A potential way to do it could be:

const refreshDoc = async () => {
'use server';
const getDbSomehow = ...;
const getDocIdFromParamsOrQuery = ...;
    const storedDoc = await db.get<T>(docId).catch(initialDocFn);
    setDoc(() => storedDoc);
  };

function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
const doc = createAsync(refreshDoc);

  const initialDocId = () => initialDocFn()._id;

  // If you need to setDoc you could use useAction and useSubmission to retreive the response.
}

const refreshDoc = async () => {
'use server';
const getDbSomehow = ...;
const getDocIdFromParamsOrQuery = ...;
    const storedDoc = await db.get<T>(docId).catch(initialDocFn);
    setDoc(() => storedDoc);
  };

function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
const doc = createAsync(refreshDoc);

  const initialDocId = () => initialDocFn()._id;

  // If you need to setDoc you could use useAction and useSubmission to retreive the response.
}

This is some ideas to your implementation, you will need to adapt to your code. Happy coding!

8 replies

SSolidJS

•Created by AlberTenez on 1/23/2024 in #support

How can I pass data from middleware to frontend on solid-start.

Let me try that, thanks! 🙂

3 replies

SSolidJS