개츠비의 소방 기지를 어떻게 초기화할까?

개츠비의 소방 기지를 어떻게 초기화할까?

나는 Redex-sagas와 함께 Redex를 사용하는 개츠비 어플리케이션에서 소방기지를 만드는 것에 매달렸다.의 존재를 알고 있다.firebase-sagas사용하지 않고 만들려고 노력 중이야.

다음을 통해 소방 기지 인증을 초기화하려고 한다.

import * as firebase from 'firebase/app';
import 'firebase/auth';

export const app = firebase.initializeApp(
  {
    apiKey        : "apiKey",
    authDomain    : "project.firebaseapp.com",
    databaseURL   : "https://project.firebaseio.com",
    projectId     : "project",
    storageBucket : "project.appspot.com",
    appId         : "appId"
  }

)

export const authRef = () => app.auth(); //also tried: firebase.auth() and firebase.auth(app)
//firebase.auth returns a function, but firebase.auth() throws error

다음 구성을 가지고 있다.gatsby-node.js:

const path = require('path');

exports.onCreateWebpackConfig = ({ actions, plugins, loaders, getConfig }) => {
  const config = getConfig()

  config.resolve = {
    ...config.resolve,
      mainFields: ['module', 'browser', 'main'],
      alias: {
        ...config.resolve.alias,
        ['firebase/app']       : path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js'),
        ['firebase/auth']      : path.resolve(__dirname, 'node_modules/firebase/auth/dist/index.cjs.js'),
      }
  }

  actions.replaceWebpackConfig(config)
}

오류를 줄인다:

{ [M [Error]: The XMLHttpRequest compatibility library was not found.]
  code: 'auth/internal-error',
  message: 'The XMLHttpRequest compatibility library was not found.' }

웹팩과 관련된 문제인 것 같아.나는 이 문제에 대한 어떤 통찰력이라도 갖고 싶다 :)

개츠비가 서버 환경에서 페이지를 작성하기 때문에, 개츠비가 시간을 작성하는 동안에는 파이어베이스에 접근할 수 없다.사용자가 브라우저/클라이언트 환경에 있을 때(웹 SDK 사용) 소방소 호출이 발생해야 한다.

이 문제에 대한 한 가지 해결책은 다음과 같은 기능을 만드는 것이다.

방화 기지js:

import firebase from '@firebase/app';
import '@firebase/auth';
import '@firebase/firestore';
import '@firebase/functions';

const config = {
   ... firebase config here
};

let instance;

export default function getFirebase() {
  if (typeof window !== 'undefined') {
    if (instance) return instance;
    instance = firebase.initializeApp(config);
    return instance;
  }

  return null;
}

이 파일은 함수를 반환하며, 사용자가 전역(global)을 가질 경우 Firebase의 인스턴스를 반환함window사용 가능한(예: 브라우저)또한 Firebase 인스턴스를 캐시하여 다시 초기화할 수 없도록 한다(사용자가 웹 사이트에서 페이지를 변경하는 경우).

이제 구성 요소에서 다음과 유사한 작업을 수행할 수 있다.

import getFirebase from './firebase';

function MyApp() {
  const firebase = getFirebase();
}

Gatsby가 이 페이지를 HTML로 만드는 동안gatsby build그firebaseFirebase Web SDK가 서버 환경에서 초기화할 수 없기 때문에 const는 null을 반환한다.하지만, 당신의 웹사이트에서 Firebase를 이용하려면, 당신은 Firebase가 이용 가능할 때까지 기다려야 한다(그래서 사용자는 당신의 웹사이트를 로딩해야 한다), 그래서 우리는 반응들을 이용할 수 있다.useEffect훅:

import React { useEffect } from 'react';    
import getFirebase from './firebase';

function MyApp() {
  const firebase = getFirebase();

  useEffect(() => {
    if (!firebase) return;

    firebase.auth().onAuthStateChanged((user) => { ... });
  }, [firebase]);
}

이는 Firebase가 브라우저 환경에서 사용되고 있으며 웹 SDK가 작동하는 데 필요한 브라우저에 대한 액세스 권한을 가지고 있기 때문에 작동한다.

단점도 있고 컴포넌트 컴포넌트도 돌아가야 해null콘텐츠를 표시하기 위해 Firebase가 필요한 경우, 이는 서버에 있는 HTML 빌드가 HTML을 포함하지 않고 클라이언트를 통해 주입된다는 것을 의미한다.그러나 대부분의 경우, 예를 들어account페이지, 이건 괜찮아

페이지 콘텐츠를 표시하기 위해 Cloud Firestore의 데이터에 액세스해야 하는 경우, Gatsby 빌드 중에 Admin SDK를 사용하여 콘텐츠를 가져와 GraphQL에 추가하는 것이 가장 좋다.그렇게 하면 빌드 시간 동안 서버에서 사용할 수 있을 것이다.

그것이 와플이었거나 명확하지 않았다면 미안해!

참조URL: https://stackoverflow.com/questions/58246333/how-to-initialize-firebase-in-gatsby