[쇼핑몰 프로젝트] 4. firebase 색인

1. firebase에 정의된 상품 데이터

• category 필드의 경우 map타입을 적용하여, 하위 필드를 구성

1.1. 상품 schema

• 카테고리 선택에 따라서, 데이터를 가져와야 했기 때문에 나눴어야 했다.

const productSchema = gql`
  type Category {
    category_lg: String!
    category_md: String!
    category_sm: String!
  }
  type Product {
    id: ID!
    brand: String!
    name: String!
    image_url: String!
    origin_price: Int!
    discount: Int!
    new: Boolean!
    category: Category!
    createdAt: Float!
  }

  extend type Query {
    products: [Product!]
    product(id: ID!): Product!
    selectedProducts(
      category_lg: String!
      category_md: String
      category_sm: String
    ): [Product!]
  }
`;

이렇게 selectedProducts 를 요청하도록 할 때는, 카테고리에 맞는 스트링을 보내주면서 데이터를 가져오도록 구성

1.2. selectedProducts resolver

selectedProducts: async (
      parent,
      { category_lg, category_md = "", category_sm = "" }
    ) => {
      const products = collection(db, "products");
      const queryOptions = [orderBy("createdAt", "desc")];
      if (!category_md && !category_sm)
        queryOptions.unshift(
          where("category.category_lg", "==", category_lg)
        ); // category_lg에 따라 men or women 분리
      else if (category_lg && category_md && category_sm) {
        queryOptions.unshift(where("category.category_sm", "==", category_sm)); // category_sm에 따라 long, short 등 분리
        queryOptions.unshift(where("category.category_md", "==", category_md)); // category_md에 따라 top, bottom, outer 등 분리
        queryOptions.unshift(where("category.category_lg", "==", category_lg)); // category_lg에 따라 men or women 분리
      } else if (category_lg && category_md) {
        queryOptions.unshift(where("category.category_md", "==", category_md)); // category_md에 따라 top, bottom, outer 등 분리
        queryOptions.unshift(where("category.category_lg", "==", category_lg)); // category_lg에 따라 men or women 분리
      }
      const q = query(products, ...queryOptions, limit(PAGE_SIZE));
      const querySnapshot = await getDocs(q);
      const data: DocumentData[] = [];
      querySnapshot.forEach((doc: DocumentData) => {
        const d = doc.data();
        data.push({
          id: doc.id,
          ...d,
        });
      });
      console.log("data", data);
      return data;
    },

이렇게where에서 category의 하위 타입으로 접근하려 하니 에러가 발생

{
  "errors": [
    {
      "message": "The query requires an index. That index is currently building and cannot be used yet. See its status here: https://console.firebase.google.com/v1/r/project/tkshop-285ec/firestore/indexes?create_composite=Clhwcm9qZWN0cy90a3Nob3AtMjg1ZWMvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Byb2R1Y3RzL2luZGV4ZXMvQ0lDQWdKaVVwb01LEAEaGAoUY2F0ZWdvcnkuY2F0ZWdvcnlfbGcQARoYChRjYXRlZ29yeS5jYXRlZ29yeV9tZBABGhgKFGNhdGVnb3J5LmNhdGVnb3J5X3NtEAEaDQoJY3JlYXRlZEF0EAIaDAoIX19uYW1lX18QAg",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "selectedProducts"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "code": "failed-precondition",
          "name": "FirebaseError",
          "stacktrace": [
            "FirebaseError: The query requires an index. That index is currently building and cannot be used yet. See its status here: https://console.firebase.google.com/v1/r/project/tkshop-285ec/firestore/indexes?create_composite=Clhwcm9qZWN0cy90a3Nob3AtMjg1ZWMvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Byb2R1Y3RzL2luZGV4ZXMvQ0lDQWdKaVVwb01LEAEaGAoUY2F0ZWdvcnkuY2F0ZWdvcnlfbGcQARoYChRjYXRlZ29yeS5jYXRlZ29yeV9tZBABGhgKFGNhdGVnb3J5LmNhdGVnb3J5X3NtEAEaDQoJY3JlYXRlZEF0EAIaDAoIX19uYW1lX18QAg"
          ]
        }
      }
    }
  ],
  "data": {
    "selectedProducts": null
  }
}

• firebase에서 색인 규칙을 정의하지 않아서 발생

2. 색인 규칙

• 색인 추가 버튼을 클릭하여 생성한다.

3. 정의된 카테고리 색인 규칙

• 정의된 규칙에 따라, 다시 데이터가 나오게 된다.
  
• category_lg, category_md , category_sm 에 따라 query 요청
• 1) men/women에 따라 분류
• 2) top/bottom/outer에 따라 상세 분류
• 3) long/short/hoody등에 따라 상세 분류

• category_lg, category_md 에 따라 query 요청
• 1) men/women에 따라 상세 분류
• 2) top/bottom/outer에 따라 상세 분류

• category_lg 에 따라 query 요청
• 1) men/women에 따라 상세 분류