Fehlerbehebung: Probleme bei der ersten Anmeldung und beim Laden der Website

Question

Ich habe ein Problem mit der Verwendung von Vue Apollo und Vuex in meiner Vue-Anwendung. Wenn ich mich also zum ersten Mal auf der Website anmelde, ist die Webseite leer, d. h. sie enthält keine Ereignisse und Authentifizierung, aber wenn ich die Schaltfläche „Aktualisieren“ verwende Aktualisiert die Site, alle Ereignisse werden geladen und die Authentifizierung ist auch auf der Registerkarte „Netzwerk“ sichtbar.Kann mir bitte jemand sagen, was ich falsch mache?

graphql.js

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

onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ Nachricht, Standorte, Pfad }) =>
      console.log(
        „[GraphQL-Fehler]: Nachricht: ${message}, Ort: ${locations}, Pfad: ${path}“,
      ),
    );
  
  if (networkError) {
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[Netzwerkfehler]: ${networkError}`)
  };
});

const XPORTAL = process.env.VUE_APP_XPORTAL

Funktion getHeaders() {
  const headers = {};

  const token = window.localStorage.getItem("apollo-token");
  if (Token) {
    headers["Authorization"] = `Bearer ${token}`;
  }
  headers["x-portal"] = XPORTAL;
  headers["X-Requested-With"] = "XMLHttpRequest";

  Header zurückgeben
}

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

const graphqlClient = new ApolloClient({
  Link: new HttpLink({uri: GRAPHQL, headers: getHeaders()}),
  Cache: new InMemoryCache()
});

const graphqlClientPortal = new ApolloClient({
  link: new HttpLink({ uri: GRAPHQLPORTAL, headers: getHeaders()}),
  Cache: new InMemoryCache()
});

Exportfunktion Provider() {
  const Provider = createApolloProvider({
      Kunden: {
        graphqlClient,
        graphqlClientPortal
      },
      defaultClient: graphqlClient,
      Standardoptionen: {
      $query: {
        fetchPolicy: 'Cache-und-Netzwerk'
      }
    },
  })
  Rückholanbieter
}

main.js

import { createApp } from "vue";
App aus „./App.vue“ importieren;
Router aus „./router“ importieren;
Shop aus „./store“ importieren;
import * als apolloProvider aus „../../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 } from "../utils/graphql";

Aktionen: {
  async fetchLogin({ commit, state }) {
      return new Promise(async (resolve, ablehn) => {
        commit('loadingStatus', true)
        versuchen {
          const Antwort = Warten auf Provider().clients.graphqlClient.mutate({
            Mutation:
              gql`mutation Login($email:String!, $password:String!)
              {
                login(email:$email, Passwort:$password){
                  Zeichen
                }
              }`, Variablen: {
              E-Mail: state.login.email,
              Passwort: state.login.password
            }
          })
          const token = Response.data.login.token
          commit('setToken', token)
          localStorage.setItem('apollo-token', token)
        } Catch (Fehler) {
          commit('loadingStatus', false)
        }
        lösen()
      })
    },
  {

  async fetchEvents({ commit }) {
      versuchen {
        const Antwort = Warten auf Provider().clients.graphqlClientPortal.query({
          Abfrage: gql`
            query LiveEvents($limit: Int!, $page: Int!){
              liveEvents(pagination:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){
                gesamt,
                Daten{
                  Ausweis,
                  Name,
                  Stummel,
                  Beschreibung,
                  Hauptbild{
                    Ausweis,
                    uri
                  },
                  Standort,
                  Typ,
                  Layout
                  Plaudern,
                  Liveübertragung{
                    endet am,
                    startet um
                  }
                }
              }
            }
          `, Variablen: {
            Grenze: 12,
            Seite: 0
          },
        });
        commit('allEvents', Response.data.liveEvents.data);
      } Catch (Fehler) {
        console.log('error-message', error.graphQLErrors)
      }
    },

Answer 1

这是我的解决方案。

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()
    })
  },