<p>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?</p> <p><strong>graphql.js</strong></p> <pre class="brush:php;toolbar:false;">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 }</pre> <p><strong>main.js</strong></p> <pre class="brush:php;toolbar:false;">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");</pre> <p><strong>index.js</strong></p> <pre class="brush:php;toolbar:false;">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) } },</pre> <p><br /></p>

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