Issue on website code snippet

[schettn]

I just saw this on your website and haven't tested it but I think the ...fields (autocompletion support) cannot work as fields isn't defined anywhere.

import spacex from "spacex";

const { company } = await spacex((op) =>
    op.query((q) => ({
        company: q.company(
            ({
                name,
                ceo,
                founded,
                ...fields // 👈 Autocompletion support
            }) => ({
                name,
                ceo,
                founded, //
            })
        ),
    }))
);

[schettn]

Ah.. while writing this issue I realised that ..fields is simply a placeholder and you want to communicate that the user can type any field via autocomplete.

This is maybe a bit confusing.

[liontariai]

Yep. Good point... that was the intention. At the same time, '...fields' is a 'Rest' operator and so at least the 'fields' object/var now contains the rest of the fields, i.e. all fields except 'name', 'ceo' and 'founded'.

Maybe I'll come up with a better illustration, thanks for the heads-up!

[schettn]

I thought in term of gqty.. But there is a major difference. You use callbacks for nested queries (I missed that). Qqty uses return objects which are then analysed via a Proxy.

const {company} = await resolve(({Query}) => {
  const company = Query.company(...args)

  return {
    name: company.name,
    ceo: company.ceo,
    founded: company.founded
  }
})

Do you support args?

[schettn]

Nvm. Just found it:

[schettn]

You should really link the Playground on you website.

[liontariai]

Yes, you can use args everywhere and they are hoisted into the variables of the graphql operation.
You can even use the same field (which needs args) multiple times via an alias, and the args/vars will be matched to the right instance. Even works if you use args in fragments :)

See #6

[liontariai]

You should really link the Playground on you website.

yea the playground website was my first try... the liontari.ai website is my try to look more 'professional' :D
I should kinda merge both somehow, you're right. Or at least link it, true.. I'll do that first I guess.

[liontariai]

Hey @schettn , i went all-in on the playground. Would really appreciate your feedback :)

check https://liontari.ai ... it works on mobile too, but it takes a while to load typescript and rollup things in the cache.

[schettn]

Looks nice!

But I dont get the snippet. what is code: ""?

Do yo have some documentation on how the syntax works? I personally find it quite hard to understand when just reading the code.

[liontariai]

Hmm, thanks for asking, the code: "" is sub-optimal right now.

When using the .$lazy helper to lazify an operation you can pass default arguments which are used later, when actually calling the function, and you can override the arguments later if you want.
See the 3 different calls with code: "GB", code: "FR" and code: "DE".

The problem is that code is a required argument in the Query.country( code: String! ) field. So the typescript type also requires this to be set, when constructing your query. I haven't yet found a solution to modify the type based on whether the .$lazy property is accessed or not, and I don't think it's possible.

My idea would be, to introduce a placeholder variable like _ which may be exported from the sdk so that you can do

import sdk, { _ } from "sdk";

const { getCountry } = await sdk(op => op.query(({ country }) => ({
    getCountry: country({ code: _ })(s => ({ // see the use of _ here
        name: s.name({lang: "en"}),
        capital: s.capital
    })).$lazy
})));

this would have the type any, so it satisfies the argument types, but will throw an error if not overwritten on execution.
What do you think?

I have some docs on for the .$lazy operator here: https://github.com/liontariai/samarium/blob/main/docs/lazy-execution.md