AI SaaS Challenge - snapshot length 0 causing map issue

John Gill

8d ago in AI SaaS Challenge

Hello Papafam

I hope you are very well

Finally getting through the 5 day challenge and I've hit an issue

I think the query in the useCollection might not be retreiving the correct data?

firebase looks OK as per the first image I've uploaded, however the terminal is showing the following

--- Creating a retriever... ---

--- Fetching chat history from the firestore database... ---

--- fetched last 0 messages sucessfully ---

langchain file

const chats = await adminDb

.collection("users")

.doc(userId)

.collection("files")

.doc(docId)

.collection("chat")

.orderBy("createdAt", "desc")

//.limit(LIMIT)

.get();

const [snapshot, loading, error] = useCollection(

user &&

query(

collection(db, "users", user?.id, "files", id, "chat"),

orderBy("createdAt", "asc")

)

);

-----------------------------------------------------------------------------------------------------

useEffect snippet

useEffect(() => {

if (!snapshot) return;

console.log("updated snapshot", snapshot.docs);

console.log("snapshot docs", snapshot.docs.length);

// get second last message to check if the AI is thinking

const lastMessage = messages.pop();

if (lastMessage?.role === "ai" && lastMessage.message === "Thinking...") {

// return as this is a dummy placeholder message

return;

}

const newMessages = snapshot.docs.map((doc) => {

const { role, message, createdAt } = doc.data();

return {

id: doc.id,

role,

message,

createdAt: createdAt.toDate(),

};

});

setMessages(newMessages);

// Ignore messages dependancy warning here... we don't want an infinite loop

}, [snapshot]);

the console shows the length of the snapshot.docs to be 0 which implies to me that nothing was actually retrieved and therefore I get the following error

warning: each child in a list should have a unique "key" prop

check the render method of 'chat'.....

I've tried to find the message.id via console.log and also I rendered the result in the chat and it showed no results but three ,

{/* chat messages */}

{messages.map((message) => (

<p>{message.message}</p>

</div>

))}

Has anyone seen this issue before? Or can see something in the code snippets?

I'm also getting the below message via the terminal before

Failed to find any user-provided fetch implementation. Using global fetch implementation.

Might look at the langchain file as that was a big one to go through etc...

cheers everyone, back to work now :)

7 comments

University of Code

skool.com/universityofcode

You'll get Exclusive Lessons & Content, Badass Community Support & More here to elevate as a Dev!

YouTube

Course: Zero To Full Stack Hero

Leaderboard (30-day)

+546

+204

+189

+185

+96