Reusing a component

[bramvanderholst]

Hi there,

I'm having trouble getting it to work properly, I have the following configuration for my element, seems pretty simple:

This binds the resulting object to the pageObject property of the element. This is great, but this seems me to require to name the query pageObject: Page(id: $identifier) { ... }. The result is that if I use this element multiple times, this will cause an issue that the the second element will use the same query name, thus breaking the first element..

Hope you can help:

• I'm not exactly sure why I need to provide a name for the query in the first place, shouldn't the Apollo client handle this for me? It needs to batch multiple queries, etc...
• The name of the first query object in the apollo object PageLink in this example serves no purpose at all, just needs to be unique (globally?). Ideally this would mean it would be bound to that property?

<dom-module id="rd-page-link">
  <template>
    <a href$="[[pageObject.urlKey]]"><content></content></a>
  </template>
  <script>
    Polymer({
      is: "rd-page-link",

      properties: {
        pageId: String,
        pageObject: Object,
        href: {
          type: String,
          computed: '_getHref(pageObject)'
        }
      },
      behaviors: [
        Apollo.PolymerBehavior,
      ],

      apollo: {
        PageLink: {
          query: Apollo.gql`query GetPageLink($identifier: ID!) {
                    pageObject: Page(id: $identifier) {
                      title,
                      urlKey
                    }
                  }`,
          options: '_queryOptions(pageId)',
          loadingKey: 'hostLoading',
        }
      },

      _queryOptions: function(pageId) {
        return {
          variables: {
            identifier: pageId
          },
        };
      },

      _getHref: function(pageObject) {
        console.log(pageObject);
        return pageObject.urlKey;
      },

    })
  </script>
</dom-module>

[paales]

@aruntk We're kind stuck on this part :( Idea how to solve this issue?

[aruntk]

@bramvanderholst @paales Issue is causing because of javascript object reference. I'm working on this.

[aruntk]

@bramvanderholst @paales. I think I have fixed the issue. version 1.1.21 released with the fix. Please check. I'm keeping the issue opened. Please comment if you find any other bugs related to the latest change.

[aruntk]

closing the issue. feel free to reopen if required.

[bramvanderholst]

Hi @aruntk! It doesn't seem to work as expected. It does something different, but not what it is supposed to do..

I've created the following elements:

<rd-page-link page-id="Jaskdf021msksksv99ksdf"></rd-page-link> <!-- works -->
<rd-page-link page-id="cj0tns8lx1fus0104xxc1nbb4"></rd-page-link> <!-- works -->
<rd-page-link page-id="cj0tns8lx1fus0104xxc1nbb4"></rd-page-link> <!-- doesn't work -->
<rd-page-link page-id="cj0tns8lx1fus0104xxc1nbb4"></rd-page-link> <!-- doesn't work -->

So, if the query variables are exactly the same it doesn't work as expected..

[bramvanderholst]

@aruntk I can't open the issue by the way ;)

[bramvanderholst]

@aruntk The above doesn't seem to apply. Random links don't seem to be working. I think it is some sort of race condition. If links are spaced out on the page (and thus probably in which tick they get called) it works, but if links are next to each other, it doesn't seem to work.