I am building a posting website with vue and firebase, when a user creates a post, their username will be displayed on the post.

For example:

Created by user1

This all works fine. Now I am working on a user page, where you can see the name and email of the user.

The problem there is that I don't get the email and name displayed.

This is my code:

piece of PostDetails page

<router-link :to="{ name: 'UserDetails', params: { userId: playlist.userId } }" >
    Created by {{ playlist.userName }}
</router-link>

UserDetails page:

<template>
  <div>{{ user.displayName }}</div>
</template>

<script>
import getDocument from "@/composables/getDocument";

export default {
  props: ["userId"],
  setup(props) {
      
    const { error, document } = getDocument("users", props.userId);
    const userName = document.value.displayName
    return {
      error,
      userName,
    };
  },
};
</script>

<style></style>

This is the website itself:

Summary

What I want to do, is whenever you are on a post, you can click on the username (this I have already done) and then on the userDetails page, you can see the user and email from the post that you were on.

CodePudding user response：

One classical approach in the NoSQL world is to denormalize the data in such a way you get the necessary data for a specific application screen with only one query. In other words, you don't "link" the two records, using a join like you would do in the SQL world, but you put all the data in the record to be displayed.

More concretely it means that in each Playlist doc you would duplicate the data of its author (userName, as you already do, but also email).

One side effect of this approach is that you need to keep the values in sync (i.e. the one in the User document and the ones in the Playlists documents). This synchronization could be done with a Cloud Function triggered if the User doc is modified.

Again, you should not be afraid to duplicate data and denormalize your data model. Here is a "famous" post about NoSQL data-modeling approaches: