문제 해결: 초기 로그인 및 웹사이트 로딩 문제

Question

Vue 애플리케이션에서 Vue Apollo 및 Vuex를 사용하는 데 문제가 있어서 처음으로 웹사이트에 로그인할 때 웹페이지가 비어 있습니다. 즉, 이벤트와 인증이 포함되어 있지 않지만 새로 고침을 사용할 때 버튼을 누르면 사이트가 새로 고쳐지고 모든 이벤트가 로드되며 네트워크 탭에서도 인증이 표시됩니다.누군가 내가 뭘 잘못하고 있는지 말해 줄 수 있습니까?

graphql.js

'apollo-client'에서 { ApolloClient } 가져오기;
'apollo-link-http'에서 { HttpLink }를 가져옵니다.
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createApolloProvider } from '@vue/apollo-option';
'@apollo/client/link/error'에서 { onError }를 가져옵니다.

onError(({ graphQLErrors, networkError }) => {
  if(graphQLErrors)
    graphQLErrors.map(({ 메시지, 위치, 경로 }) =>
      콘솔.로그(
        `[GraphQL 오류]: 메시지: ${message}, 위치: ${locations}, 경로: ${path}`,
      ),
    );
  
  if (네트워크 오류) {
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[네트워크 오류]: ${networkError}`)
  };
});

const XPORTAL = process.env.VUE_APP_XPORTAL

함수 getHeaders() {
  const 헤더 = {};

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

  헤더 반환
}

GRAPHQL = process.env.VUE_APP_API_GRAPHQL을 보자
GRAPHQLPORTAL = process.env.VUE_APP_API_GRAPHQLPORTAL을 보자

const graphqlClient = 새로운 ApolloClient({
  링크: 새로운 HttpLink({uri: GRAPHQL, 헤더: getHeaders()}),
  캐시: 새로운 InMemoryCache()
});

const graphqlClientPortal = 새로운 ApolloClient({
  링크: 새로운 HttpLink({ uri: GRAPHQLPORTAL, 헤더: getHeaders()}),
  캐시: 새로운 InMemoryCache()
});

내보내기 함수 제공자() {
  const 공급자 = createApolloProvider({
      고객: {
        그래프ql클라이언트,
        graphql클라이언트 포털
      },
      defaultClient: graphqlClient,
      기본옵션: {
      $쿼리: {
        fetchPolicy: '캐시 및 네트워크'
      }
    },
  })
  반품 제공업체
}

main.js

"vue"에서 { createApp } 가져오기;
"./App.vue"에서 앱을 가져옵니다.
"./router"에서 라우터를 가져옵니다.
"./store"에서 저장소 가져오기;
* "../../events.live/src/utils/graphql"에서 apolloProvider로 가져오기;

const app = createApp(앱);
app.use(apolloProvider.provider)
app.use(스토어);
app.use(라우터);
app.mount("#app");

index.js

"../utils/graphql"에서 { 공급자 } 가져오기;

작업: {
  비동기 fetchLogin({ 커밋, 상태 }) {
      return new Promise(async (해결, 거부) => {
        커밋('로딩상태', 참)
        노력하다 {
          const 응답 = 공급자()를 기다립니다.clients.graphqlClient.mutate({
            돌연변이:
              gql`mutation 로그인($email:String!, $password:String!)
              {
                로그인(이메일:$email, 비밀번호:$password){
                  토큰
                }
              }`, 변수: {
              이메일: state.login.email,
              비밀번호: state.login.password
            }
          })
          const 토큰 = response.data.login.token
          커밋('setToken', 토큰)
          localStorage.setItem('apollo-token', 토큰)
        } 잡기(오류) {
          커밋('로딩상태', 거짓)
        }
        해결하다()
      })
    },
  {

  비동기 fetchEvents({ 커밋 }) {
      노력하다 {
        const 응답 = 공급자()를 기다립니다.clients.graphqlClientPortal.query({
          쿼리: gql`
            LiveEvents 쿼리($limit: Int!, $page: Int!){
              liveEvents(페이지 매김:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){
                총,
                데이터{
                  ID,
                  이름,
                  그루터기,
                  설명,
                  메인이미지{
                    ID,
                    우리
                  },
                  위치,
                  유형,
                  공들여 나열한 것
                  채팅,
                  실시간 스트리밍{
                    종료 시간,
                    시작
                  }
                }
              }
            }
          `, 변수: {
            제한: 12,
            페이지: 0
          },
        });
        commit('allEvents', response.data.liveEvents.data);
      } 잡기(오류) {
        console.log('error-message', error.graphQLErrors)
      }
    },

Answer 1

이것이 내 솔루션입니다.

으아아아