Error Accessing JS Property

[dkao1978]

Using:
reason-apollo@0.7.4
react-apollo@2.1.4
graphql_ppx@.2.1
graphql@0.13.0
graphql-tag@2.9.2

In an attempt to follow the tutorial, I came across this error:

  We've found a bug for you!
app.re 72:51-52

  70 ┆   | Loading => <div>(str("Loading"))</div>
  71 ┆   | Error(error) => (Js.log(error));<div></div>
  72 ┆   | Data(response) => (Js.log(response##_User##username));<div></div>
  73 ┆
  74 ┆ }

  This expression has type {. User: option({. "username": string})}
  It has no method _User

ninja: build stopped: subcommand failed.
>>>> Finish compiling(exit: 1)

module GetUser = [%graphql
  {|
    query getUser ($pk: ID!){
      User(id: $pk){
          username
      }
    }
|}
];

module GetUserQuery = ReasonApollo.CreateQuery(GetUser);
let usersQuery = GetUser.make(~pk="1", ());
<ReasonApollo.Provider client=Client.instance>
    <GetUserQuery variables=usersQuery##variables>
         ...(({result}) => {
         switch result {
              | NoData => <div>(str("No Data"))</div>
              | Loading => <div>(str("Loading"))</div>
              | Error(error) => (Js.log(error));<div></div>
              | Data(response) => (Js.log(response##_User##username));<div></div>
            }
        })
    </GetUserQuery>
</ReasonApollo.Provider>

Is there something that I'm missing?

[fakenickels]

It is exactly what the error is saying

you are trying to access _User in response with response##_User but what actually exists is response##User.
Also, field names should be camelCase and not PascalCase in GraphQL, I think you'll have a problem there by using User, so update your server schema so you can do this instead for querying:

    query getUser ($pk: ID!){
      user(id: $pk){
          username
      }
    }

[dkao1978]

response##User does not work:

https://bucklescript.github.io/docs/en/object.html#name-mangling

response##_User should be legal.

Though I did give response##User a try and got:

 70 ┆   | Loading => <div>(str("Loading"))</div>
  71 ┆   | Error(error) => (Js.log(error));<div></div>
  72 ┆   | Data(response) => (Js.log(response##User##username));<div></div>
  73 ┆
  74 ┆ }

  Js object ## expect syntax like obj##(paint (a,b))

ninja: error: rebuilding 'build.ninja': subcommand failed
>>>> Finish compiling(exit: 1)

Using lowercase for the schema wouldn't be possible in the short term.

[dkao1978]

Thans @grsabreu.

For posterity, the work around is to use raw:

            switch result {
              | NoData => <div>(str("No Data"))</div>
              | Loading => <div>(str("Loading"))</div>
              | Error(error) => (Js.log(error));<div></div>
              | Data(response) => {
                <div>({let rawUser = [%raw{|result|}];
                let user = rawUser[0]##_User;
                let username = (user[0]##username);
                username
                }
 

[Gregoirevda]

this is the related issue on graphql_ppx repo: mhallin/graphql_ppx#9

By the time it is fixed, you could also use an alias, which works fine

module GetUser = [%graphql
  {|
    query getUser ($pk: ID!){
      user: User(id: $pk){
          username
      }
    }
|}
];