Как анонимные пользователи могут взаимодействовать с фронтендом Vue3, используя GraphQL и бэкенд Django?

При создании приложения для блога я хочу создать взаимодействие с пользователями, например, "нравится", "не нравится" и "поделиться". Однако я хочу, чтобы пользователи были анонимными (не аутентифицированными). Как я могу достичь этого, чтобы отобразить подсчеты для like, dislike и share в Vue 3 JS? Я хочу получать данные о взаимодействиях из бэкенда, так как приложение монтирует (onMounted) lifescycle hook. Но когда я обновляю страницу, она отображает начальные значения like(0), dislike (0) и share(0).

SocialMediaButtons.vue:

Mutations.py:

# mutations.py

import graphene
from graphene import ObjectType
from . import models



class InteractionsType(graphene.ObjectType):
    like = graphene.Int()
    dislike = graphene.Int()
    share = graphene.Int()

class UpdateInteractions(graphene.Mutation):
    class Arguments:
        id = graphene.ID(required=True)
        action = graphene.String(required=True)

    success = graphene.Boolean()
    message = graphene.String()
    interactions = graphene.Field(InteractionsType)

    def mutate(self, info, id, action):
        try:
            post = models.Post.objects.get(id=id)
        except models.Post.DoesNotExist:
            return UpdateInteractions(success=False, message="Post not found")

        user_interactions, created = models.Interaction.objects.get_or_create(post=post)

        if action == "like":
            user_interactions.like = user_interactions.like + 1
        elif action == "dislike":
            user_interactions.dislike = user_interactions.dislike + 1
        elif action == "share":
            user_interactions.share = user_interactions.share + 1
        else:
            return UpdateInteractions(success=False, message="Invalid action")

        user_interactions.save()

        return UpdateInteractions(
            success=True,
            message="Interactions updated successfully",
            interactions=user_interactions
        )

class Mutation(ObjectType):
    update_interactions = UpdateInteractions.Field()

interactionStore.js

// interactionStore.js
import { defineStore } from 'pinia';
import apolloClient from '@/apolloClient';
import { UPDATE_INTERACTIONS } from '../graphql/mutations/postMutation';
import { FETCH_INTERACTIONS } from '../graphql/queries/postQuery';

export const useInteractionStore = defineStore('interactionStore', {
  state: () => ({
    interactions: {
      like: 0,
      dislike: 0,
      share: 0,
    },
  }),
  actions: {
    async fetchInteractions(postId) {
      try {
        const response = await apolloClient.query({
          query: FETCH_INTERACTIONS,
          variables: {
            id: postId,
          },
        });

        // Check if the response data exists and contains the interactions
        if (response.data && response.data.interactions) {
          this.interactions = response.data.interactions;
        } else {
          console.error('Query failed: Response does not contain interactions', response.errors);
        }
      } catch (error) {
        console.error('An error occurred during query:', error);
      }
    },
    async updateInteraction(postId, action) {
      try {
        const response = await apolloClient.mutate({
          mutation: UPDATE_INTERACTIONS,
          variables: {
            id: postId,
            action,
          },
        });

        if (response.data.updateInteractions.success) {
          this.interactions = response.data.updateInteractions.interactions;
        } else {
          console.error('Mutation failed:', response.data.updateInteractions.message);
          throw new Error('Failed to update interactions');
        }
      } catch (error) {
        console.error('An error occurred during mutation:', error);
        throw new Error('Failed to update interactions');
      }
    },     
  },
});

fetch_interactions

export const FETCH_INTERACTIONS = gql`
  query GetInteractions($id: ID!) {
    postById(id: $id) {
      interactions {
        like
        dislike
        share
      }
    }
  }
`;

Вернуться на верх