The Wayback Machine - https://web.archive.org/web/20201022230507/https://github.com/vuejs/vue-apollo/issues/698
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

insidious problems not documented when using typescript the "this" instance is not mounted correctly in results callback #698

Open
fvigotti opened this issue Jul 12, 2019 · 0 comments
Labels

Comments

@fvigotti
Copy link

@fvigotti fvigotti commented Jul 12, 2019

Hi,
I want to show an issue that bitten me hard in the past days, I've had problems in subscriptions but I've seen same behaviour in queries too ,

my current versions of vue-apollo are the latest one available today ("vue-apollo": "3.0.0-rc.1", ) ( aswell as latest version of nuxt/vue etc ) , but while investigating I've seen this issue existing in past versions too

wrong

    get apollo () {
      let instance = this as unknown as StatsDashboardPage // <<--- this instance variable will be wrong ( dont't have the mounted page components ) 
      return   { // this is called before local context being setup ( properties not available )
        $subscribe : {
          simplesub1: <VueApolloSubscriptionOptions<StatsDashboardPage, TrafficSummaryDashboardSubscription>>{
            query : trafficSummaryDashboard
            ,variables: <GQLtypes.TrafficSummaryDashboardSubscriptionVariables>{ pubId : "90" }
            
            ,result: ( {data,context,errors} ) => { //  is a hook called when a result is received
            let anotherWrongInstance = this // <<--- this instance variable will be wrong ( dont't have the mounted page components ) 
            .... 

-------------- HERE the variable Instance is instance of Vue object ( not containing the data object of the vue-page
------- also the this is WRONG,

correct

get apollo () {

      let instance = this as unknown as StatsDashboardPage
      return   { // this is called before local context being setup ( properties not available )

        $subscribe : {
           
          simplesub1 () {
        let instance2 =  this as unknown as StatsDashboardPage
        return <VueApolloSubscriptionOptions<StatsDashboardPage, TrafficSummaryDashboardSubscription>>{ 
            query : trafficSummaryDashboard
            ,variables: <GQLtypes.TrafficSummaryDashboardSubscriptionVariables>{ pubId : "90" }
            ,result: ( {data,context,errors} ) => { //  is a hook called when a result is received
            
            let correctPageInstance = this // <<--- this now is OK!!
            .... 

-------------- HERE the variable Instance is instance of Vue object ( not containing the data object of the vue-page
-------------- HERE the variable Instance2 is instance of VueComponent  object with everything as expected
------- also the this is CORRECT,

the documented usage is this ( in javascript, but the typescript translation is more like the wrong-first example I've showed than the second-correct one .. ) :

// Apollo-specific options
apollo: {
  // Subscriptions
  $subscribe: {
    // When a tag is added
    tags: {
      query: gql`subscription tags($type: String!) {
        tagAdded(type: $type) {
          id
          label
          type
        }
      }`,
      // Reactive variables
      variables () {
        return {
          type: this.type,
        }
      },
      // Result hook
      result (data) {
        // Let's update the local data
        this.tags.push(data.tagAdded)
      },
      // Skip the subscription
      skip () {
        return this.skipSubscription
      }
    },
  },
},

I've spent 3 days around this issue I hope to save someone's time with that bug report, and I hope someone have the time to update the documentation accordingly :)

thank you!
Francesco

p.s.
note that I've not tested the javascript behaviour if it's correct or not, I've only tested that in typescript..

@fvigotti fvigotti changed the title insidious problems not documented in typescript the "this" insidious problems not documented when using typescript the "this" instance is not mounted correctly Jul 12, 2019
@fvigotti fvigotti changed the title insidious problems not documented when using typescript the "this" instance is not mounted correctly insidious problems not documented when using typescript the "this" instance is not mounted correctly in results callback Jul 12, 2019
@Akryum Akryum added the docs label Sep 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.
Morty Proxy This is a proxified and sanitized view of the page, visit original site.