[Gatsby + firebase] firebase adminApi를 사용하여 firestore의 값을 얻고 GraphiQL에서 확인

7727 단어 Firebasegatsby

이 기사에서 할 수 있는 일


  • gatsby-node에서 firebase adminApi를 사용하여 firestore의 값을 가져옵니다.

    npm install


    npm i firebase-admin
    

    gatsby-node.js



    아는 사람은 코드만 봐~!


    const admin = require('firebase-admin');
    
    exports.sourceNodes = async ({
      actions,
      createContentDigest,
      createNodeId,
    }) => {
      const { createNode } = actions;
    
      // 何度も初期化したくないので!
      if (admin.apps && !admin.apps.length) {
        await admin.initializeApp();
      }
    
      // firestoreからデータを取得する
      const snapshot = await admin
        .firestore()
        .collection('xxxx')
        .get();
    
      // いい感じにデータをitemsに詰める
      // 何かデータをいじるならこのタイミングでやってもいいかも~
      const items = await snapshot.docs.map((doc, index) => {
        const { body, name } = doc.data();
        return {
          body,
          name,
        };
      });
    
      // GraphQLでデータを取れるように〜
      items.forEach(item =>
        createNode({
          ...item,
          id: createNodeId(item.index),
          parent: null,
          children: [],
          internal: {
            type: `FirebaseDatabaseItemsField`,
            contentDigest: createContentDigest('hoge'),
            description: 'firebaseにある商品の情報', // optional
          },
        })
      );
    };
    
    

    어쩌면 이것이 된 사람은 아래 링크를 보아라 ~


  • firebase admin init 주위
  • Gatsby createNode 주위

  • gatsby-config


    // なければ追記する〜
    require('dotenv').config({
      path: `.env.${process.env.NODE_ENV}`,
    });
    module.exports = {
    

    firebase 측에서 할 일



    아래 링크에서 Firebase Admin SDK의 비밀 키 (json)를 가져와주세요!



    htps : // 이런. 푹 빠져라. 오, ぇ. 코 m/p 로지ぇct/_/세친 gs/세 rゔぃ세 아코응 ts/아드민 sdk? hl = 그럼


    json을 잡으면



    적당한 이름으로 배치


    ├── README.md
    ├── gatsby-browser.js
    ├── gatsby-config.js
    ├── gatsby-node.js
    ├── gatsby-ssr.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    
    ├── service_account.json
    
    └── src
    
    

    반드시 할 것! ! ! !


    .gitignore에 다음을 추가하십시오.
    파일 이름이므로 위에서 설정한 사람에게 맞추십시오.
    service_account.json
    

    service_account.json은 무엇이든지 git에 push하는 일을 하면 안됩니다.
    절대!

    env 설정


    .env.development 에 다음 추가
    GOOGLE_APPLICATION_CREDENTIALS=service_account.json
    

    develop에서 확인


    gatsby clean
    gatsby develop
    

    아래에 액세스하여 값이 들어 있는지 확인합시다.
    http://localhost:8000/___graphql

    비고



    이번은 .env.development 에 밖에 추가하지 않았습니다만, 빌드했을 때에도 보고 싶을 때는 .env.production 에 추가하지 않으면 안 된다든지 여러가지 있습니다만 이번은 여기까지~

    좋은 웹페이지 즐겨찾기