동일한 페이지에서 서로 다른 쿼리에 vue-apollo 구성 요소 사용

동일한 페이지에서 서로 다른 쿼리에 vue-apollo 구성 요소 사용

소품 내에서 다른 GraphQL 쿼리와 변수를 수신하고 GraphQL 소스를 조회하여 자 컴포넌트에 응답을 전달하는 Apollo를 사용하여 래퍼 컴포넌트를 만들고 싶습니다.이 컴포넌트를 다른 문의가 있는 페이지에서 두 번 사용하고 싶습니다.

하지만 난 어느 시점에 갇힌 것 같아.결과적으로 컴포넌트의 양쪽 인스턴스가 동일한 입력으로 동작하게 됩니다.첫 번째 드롭다운컴포넌트의 쿼리 프로포트가 페이지의 모든 드롭다운에서 사용되고 있습니다.범위와 키워드 및 항목은 다르지만 페이지의 모든 드롭다운은 첫 번째 드롭다운 쿼리를 사용합니다.

다음은 DropdownSearch 컴포넌트입니다.검색바 컴포넌트에서 쿼리 리스트컴포넌트로 키워드를 전달합니다.

<template>
  <div class="dropdown-search">
    <div class="dropdown-search-display" @click="toggleDropdown"> 
      <span>{{value[nameProp]}}</span>
      <span class="dropdown-search-dropdown-toggle">
        <i v-if="!isOpen" class="fa fa-caret-down" aria-hidden="true"></i>
        <i v-if="isOpen" class="fa fa-caret-up" aria-hidden="true"></i>
      </span>
    </div>
    <div :class="{ 'dropdown-search-dropdown': true, 'dropdown-search-dropdown--open': isOpen}" >
      <search-bar v-model="searchKeyword" class="dropdown-search-searchbar"></search-bar>
      <div class="dropdown-search-list">
        <query-list
          :query="query"
          :keyword="searchKeyword"
          :listItemComponent="ListItem"
        ></query-list>
      </div>
    </div>
  </div>
</template>

<script>
const ListItem = {
  template: '<div class="dropdown-search-list-item">{{record.name}}</div>',
  props: {
    record: { required: true },
  },
};

export default {
  name: 'dropdownSearch',
  props: {
    name: String,
    nameProp: String,
    value: Object,
    query: Object,
  },
  components: {
    'dropdown-list-item': ListItem,
  },
  data() {
    return {
      isOpen: false,
      searchKeyword: '',
      ListItem,
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>

QueryList 컴포넌트 - Apollo를 사용하여 쿼리를 만들고 결과 목록을 표시합니다.

<template>
  <div class="">
    <loading-indicator :isLoading="loading > 0"></loading-indicator>
    <ul class="app__list">
      <li class="app__list-item" v-for="item in items" :key="item.id">
        <component
          :is="listItemComponent"
          :record="item"
        ></component>
      </li>
    </ul> 
  </div>
</template>

<script>
export default {
  name: 'queryList',
  props: {
    query: Object,
    keyword: String,
    listItemComponent: { required: true },
  },
  data() {
    return {
      items: [],
      loading: 0,
    };
  },
  apollo: {
    items: {
      query() {
        return this.query;
      },
      variables() {
        return {
          keyword: this.keyword || '',
        };
      },
      loadingKey: 'loading',
    },
  },
};
</script>

페이지의 드롭다운 검색 구성 요소를 사용하는 방법은 다음과 같습니다.

   <label class="edit-record-field">
        <span class="edit-record-field-label">Category</span>
        <dropdown-search 
          class="edit-record-field-input"
          v-model="record.category"
          :nameProp="'name'"
          :query="getCategories"
        ></dropdown-search>  
   </label>
      <label class="edit-record-field">
        <span class="edit-record-field-label">Location</span>
        <dropdown-search 
          class="edit-record-field-input"
          v-model="record.location"
          :nameProp="'name'"
          :query="getLocation"
        ></dropdown-search>  
   </label> 

해결책을 찾고 있어요.부품을 작동시킬 수 있도록 도와주시면 감사하겠습니다.

언급URL : https://stackoverflow.com/questions/45431517/using-a-vue-apollo-component-with-different-queries-on-the-same-page