Dépannage : problèmes de connexion initiale et de chargement du site Web

Question

J'ai un problème avec Vue Apollo et Vuex dans mon application Vue, donc lorsque je me connecte au site Web pour la première fois, la page Web est vide, c'est-à-dire qu'elle ne contient pas d'événements ni d'authentification, mais lorsque j'utilise le bouton d'actualisation actualise le site, tous les événements se chargent et l'authentification est visible même dans l'onglet réseau.S'il vous plaît, quelqu'un peut-il me dire ce que je fais de mal ?

graphql.js

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

onError(({ graphQLErrors, networkError }) => {
  si (graphQLErrors)
    graphQLErrors.map(({ message, emplacements, chemin }) =>
      console.log(
        `[Erreur GraphQL] : message : ${message}, emplacement : ${locations}, chemin : ${path}`,
      ),
    );
  
  si (erreur réseau) {
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[Erreur réseau] : ${networkError}`)
  } ;
});

const XPORTAL = processus.env.VUE_APP_XPORTAL

fonction getHeaders() {
  en-têtes const = {} ;

  const token = window.localStorage.getItem("apollo-token");
  si (jeton) {
    headers["Autorisation"] = `Bearer ${token}`;
  }
  en-têtes["x-portal"] = XPORTAL;
  en-têtes["X-Requested-With"] = "XMLHttpRequest";

  retourner les en-têtes
}

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

const graphqlClient = nouveau ApolloClient ({
  lien : nouveau HttpLink({uri : GRAPHQL, en-têtes : getHeaders()}),
  cache : nouveau InMemoryCache()
});

const graphqlClientPortal = nouveau ApolloClient ({
  lien : nouveau HttpLink({ uri : GRAPHQLPORTAL, en-têtes : getHeaders()}),
  cache : nouveau InMemoryCache()
});

fournisseur de fonction d'exportation() {
  const fournisseur = createApolloProvider({
      clients : {
        graphqlClient,
        graphqlClientPortal
      },
      Client par défaut : graphqlClient,
      Options par défaut : {
      $requête : {
        fetchPolicy : « cache et réseau »
      }
    },
  })
  fournisseur de retour
}</pré>
<p><strong>main.js</strong></p>
<pre class="brush:php;toolbar:false;">import { createApp } depuis "vue" ;
importer l'application depuis "./App.vue" ;
importer le routeur depuis "./router" ;
importer un magasin depuis "./store" ;
importer * en tant que apolloProvider depuis "../../events.live/src/utils/graphql" ;

const app = createApp(App);
app.use(apolloProvider.provider)
app.use(magasin);
app.use(routeur);
app.mount("#app");

index.js

importer {fournisseur} depuis "../utils/graphql";

Actions: {
  async fetchLogin ({ commit, état }) {
      renvoyer une nouvelle promesse (async (résolution, rejet) => {
        commit('loadingStatus', vrai)
        essayer {
          const réponse = attendre fournisseur().clients.graphqlClient.mutate({
            mutation:
              Connexion gql`mutation ($email:String!, $password:String!)
              {
                connexion(email :$email, mot de passe :$mot de passe){
                  jeton
                }
              }`, variable : {
              email : state.login.email,
              mot de passe : state.login.password
            }
          })
          jeton const = réponse.data.login.token
          commit('setToken', jeton)
          localStorage.setItem('apollo-token', jeton)
        } attraper (erreur) {
          commit('loadingStatus', faux)
        }
        résoudre()
      })
    },
  {

  async fetchEvents({ commit }) {
      essayer {
        const réponse = attendre fournisseur().clients.graphqlClientPortal.query({
          requête : gql`
            requête LiveEvents ($limite : Int !, $page : Int !){
              liveEvents(pagination :{limite :$limite, page :$page}, commande :{startsAt :{direction : DESC}}){
                total,
                données{
                  identifiant,
                  nom,
                  bout,
                  description,
                  Image principale{
                    identifiant,
                    uri
                  },
                  emplacement,
                  taper,
                  mise en page
                  chat,
                  direct{
                    fini à,
                    commence à
                  }
                }
              }
            }
          `, variable : {
            limite : 12,
            page : 0
          },
        });
        commit('allEvents', réponse.data.liveEvents.data);
      } attraper (erreur) {
        console.log('message d'erreur', erreur.graphQLErrors)
      }
    },

Answer 1

C'est ma solution.

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