Penyelesaian masalah: Log masuk awal dan isu pemuatan tapak web

Question

Saya menghadapi masalah menggunakan Vue Apollo dan Vuex dalam aplikasi Vue saya, jadi apabila saya log masuk ke tapak web buat kali pertama, halaman web tersebut kosong iaitu tidak mengandungi acara dan pengesahan, tetapi apabila saya menggunakan butang Apabila muat semula menyegarkan tapak, semua acara dimuatkan dan pengesahan boleh dilihat walaupun dalam tab rangkaian.Tolong bolehkah seseorang memberitahu saya apa yang saya lakukan salah?

graphql.js

import { ApolloClient } daripada 'apollo-client';
import { HttpLink } daripada 'apollo-link-http';
import { InMemoryCache } daripada 'apollo-cache-inmemory';
import { createApolloProvider } daripada '@vue/apollo-option';
import { onError } daripada '@apollo/client/link/error';

onError(({ graphQLErrors, networkError }) => {
  jika (graphQLErrors)
    graphQLErrors.map(({ mesej, lokasi, laluan }) =>
      console.log(
        `[GraphQL error]: Mesej: ${message}, Lokasi: ${locations}, Path: ${path}`,
      ),
    );
  
  if (networkError) {
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[Ralat rangkaian]: ${networkError}`)
  };
});

const XPORTAL = process.env.VUE_APP_XPORTAL

fungsi getHeaders() {
  tajuk const = {};

  token const = window.localStorage.getItem("apollo-token");
  jika (token) {
    headers["Kebenaran"] = `Pembawa ${token}`;
  }
  pengepala["x-portal"] = XPORTAL;
  headers["X-Requested-With"] = "XMLHttpRequest";

  pengepala kembali
}

biarkan GRAPHQL = process.env.VUE_APP_API_GRAPHQL
biarkan GRAPHQLPORTAL = process.env.VUE_APP_API_GRAPHQLPORTAL

const graphqlClient = ApolloClient baharu({
  pautan: HttpLink baharu({uri: GRAPHQL, pengepala: getHeaders()}),
  cache: InMemoryCache() baharu
});

const graphqlClientPortal = ApolloClient baharu({
  pautan: HttpLink baharu({ uri: GRAPHQLPORTAL, pengepala: getHeaders()}),
  cache: InMemoryCache() baharu
});

pembekal fungsi eksport() {
  pembekal const = createApolloProvider({
      pelanggan: {
        graphqlClient,
        graphqlClientPortal
      },
      defaultClient: graphqlClient,
      pilihan lalai: {
      $query: {
        fetchPolicy: 'cache-and-network'
      }
    },
  })
  pembekal pulangan
}

main.js

import { createApp } daripada "vue";
import Apl daripada "./App.vue";
import penghala daripada "./router";
import kedai daripada "./store";
import * sebagai apolloProvider daripada "../../events.live/src/utils/graphql";

const app = createApp(App);
app.use(apolloProvider.provider)
app.use(store);
app.use(router);
app.mount("#app");

index.js

import { provider } daripada "../utils/graphql";

tindakan: {
  async fetchLogin({ commit, state }) {
      kembalikan Janji baharu(async (selesai, tolak) => {
        commit('loadingStatus', benar)
        cuba {
          respons const = menunggu pembekal().clients.graphqlClient.mutate({
            mutasi:
              gql`mutation Log masuk($email:String!, $password:String!)
              {
                log masuk(e-mel:$e-mel, kata laluan:$kata laluan){
                  token
                }
              }`, pembolehubah: {
              e-mel: state.login.email,
              kata laluan: state.login.password
            }
          })
          token const = respons.data.login.token
          commit('setToken', token)
          localStorage.setItem('apollo-token', token)
        } tangkap (ralat) {
          commit('loadingStatus', false)
        }
        menyelesaikan ()
      })
    },
  {

  async fetchEvents({ commit }) {
      cuba {
        respons const = menunggu pembekal().clients.graphqlClientPortal.query({
          pertanyaan: gql`
            pertanyaan LiveEvents($limit: Int!, $page: Int!){
              liveEvents(penomboran:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){
                jumlah,
                data{
                  ID,
                  nama,
                  rintisan,
                  penerangan,
                  Imej utama{
                    ID,
                    uri
                  },
                  lokasi,
                  jenis,
                  susun atur
                  sembang,
                  siaran langsung{
                    berakhirPada,
                    bermula pada
                  }
                }
              }
            }
          `, pembolehubah: {
            had: 12,
            muka surat: 0
          },
        });
        commit('allEvents', response.data.liveEvents.data);
      } tangkap (ralat) {
        console.log('error-message', error.graphQLErrors)
      }
    },

Answer 1

Ini penyelesaian saya.

import { provider } from "../utils/graphql";

actions: {
  async fetchEvents({ commit }) {
    try {
      const response = await provider().clients.graphqlClientPortal.query({
        query: gql`
          query LiveEvents($limit: Int!, $page: Int!){
            liveEvents(pagination:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){
              total,
              data{
                id,
                name,
                stub,
                description,
                mainImage{
                  id,
                  uri
                },
                location,
                type,
                layout
                chat,
                liveStream{
                  endsAt,
                  startsAt
                }
              }
            }
          }
        `, variables: {
          limit: 12,
          page: 0
        },
      });
      commit('allEvents', response.data.liveEvents.data);
    } catch (error) {
      console.log('error-message', error.graphQLErrors)
    }
  },

  async fetchLogin({ commit, state }) {
    return new Promise(async (resolve, reject) => {
      commit('loadingStatus', true)
      try {
        // Load the events before logging in
        await dispatch('fetchEvents');
        const response = await provider().clients.graphqlClient.mutate({
          mutation:
            gql`mutation Login($email:String!, $password:String!)
            {
              login(email:$email, password:$password){
                token
              }
            }`, variables: {
            email: state.login.email,
            password: state.login.password
          }
        })
        const token = response.data.login.token
        commit('setToken', token)
        localStorage.setItem('apollo-token', token)
      } catch (error) {
        commit('loadingStatus', false)
      }
      resolve()
    })
  },