[Question] how to use variables

[germsb]

Hello, thanks for your library, looks pretty cool.

The doc says:

Currently typed-graphqlify can convert these GraphQL features:

• Inputs
  • Variables
  • Param

But I did not find anything in doc or test on the use of variables.

It is possible to add an example ?

[acro5piano]

Hi @germsb , Thank you for your interest.

You can see a mutation using variable: https://github.com/acro5piano/typed-graphqlify#basic-mutation

However, using params will be more simpler code. I recommend this.

[sirganya]

Can you create an example of how to create a query with variables using both methods you mention please. The mutation example is confusing as it is terse and talks about aliases.

[acro5piano]

@sirganya

In general, there are two methods to add dynamic parameters in GraphQL. One is variable and the other is directly embed parameters to a GraphQL query.

In terms of standard GraphQL server implementation, variable is better because it has better capability of caching and metrics (if the server supports such features) as the query is almost the same. However it was impossible in typed-graphqlify because of the TypeScript limitation. This is why we have to use alias for now.

Now that TypeScript supports Template Literal Types, it is possible to implement variables without alias in theory, but that feature has not been implemented in typed-graphqlify yet. see #158 .

As you said, alias is pretty confusing. Basically I recommend you to use params helper unless you need query based caching and metrics.

import { mutation, params, rawString } from 'typed-graphqlify'

mutation('updateUserMutation', {
  updateUser: params(
    {
      input: {
        name: rawString('Ben'),
        slug: rawString('/ben'),
      },
    },
    {
      id: types.number,
      name: types.string,
    },
  ),
})

[sirganya]

Thanks for that.

I think an example for a simple query with variables would be useful for developers like myself who are not GQL experts and are mainly trying to make things work due to time pressure and have simple requirements.

I had been looking for a solution for efficient typing GQL and typescript, Apollo had a code-get tool that would query the schema and create types which was handy but is now deprecated in favour of the code-gen from the guild, but that solution is too strict and prescriptive for my liking.

Your approach is much more flexible and elegant however the documentation is more code comments rather than the hand-holding a new comer to your package like myself would need. I understand documentation is time consuming so code examples can fill that gap. I spent an hour trying to implement a simple query with variables because the syntax doesn't make intuitive sense to me and came up with this, it was the only combination which produced the GQL string I needed, but it's confusing as the repetition of the $ownerName and $stackFileName seems redundant, and the params are not visible to TS but it seems to be necessary? As there is no example in the docs I can't be sure.

const getStack = query(
    "GetStack($ownerName: String, $stackFileName: String)",
    { getStack: params({ ownerName: "$ownerName", stackFileName: "$stackFileName" }, { code: types.string }) },
); 

request(clientConfig.gqlGetStack(), getStack.toString(), {
  ownerName,
  stackFileName,
})

which doesn't match the pattern you show above. Which still leaves me confused as to the "correctness" of what I'm doing.

Again I appreciate the reply but it is pitched at a higher level when what would be more helpful to me would be an example of the recommended way to construct a simple query with parameters/variable.

Could you add one to the reply to this if you have time? I'd appreciate it greatly.

[sirganya]

This works:

const getStack = (ownerName: string, stackFilename: string) => {
    return query("GetStack", {
        getStack: params(
            { ownerName: rawString(ownerName), stackFileName: rawString(stackFilename) },
            { code: types.string },
        ),
    });
};

request("myurl", getStack.toString())

[acro5piano]

@sirganya thanks for the code example and I'm happy you found the solution. If you sent a pull request for the documentation I'd be happy to merge it.

Actually I recommend you to use graphql-codegen from the guild guy, as it provides a better type-safety and developer experience. I mostly use graphql-codegen for my serious projects and no problems so far - I sadly admit that typed-graphqlify is outdated for the current technology trend.