Interactive UI for building queries

[MatsDK]

closes #10

This pull request changes the following:

• Updated UI, general layout didn't change
• Show user the ts type of the inputs for queries/mutations
• Query builder: users can insert queries/mutations with a generated default input
• Ability to set headers on requests
• Store tabs and headers in localstorage

https://user-images.githubusercontent.com/67562518/180209132-c10eb107-f5cf-48b2-ba69-8987fae44bfc.mp4

[sachinraja]

Hey, thanks! This is a lot. I really wish you left a comment on the issue so we could've talked about this first. I'll try to review this within a few days.

Here's some basic feedback based off the video:

• this is really, really good work
• I like the layout changes
• I like the new colors
• in the query builder UI, can we remove the distinction between queries and mutations?
• I'm not sure if this is how you've currently set it up, but any work of generating the inputs and docs should be shifted to the server since they're the same for every client

[MatsDK]

Hey, thanks for taking a look at this (I am new to open-source so thanks for some feedback) At first, I was just experimenting with the package and didn't think about writing a comment on the issue.

The generation of the inputs is done by the server together with the typescript declarations. When I get the time, I will try to remove the distinction between queries and mutations in the query builder.

[sachinraja]

Looks mostly good now, I'll do one last pass over the changed code + test locally, and then merge (probably not today).

[MatsDK]

Thanks for taking a look at this. (and sorry that this is so much) I just created a commit that resolves the issue with the tab ids.

[sachinraja]

Ah I forgot about this! So sorry about that. Will merge and publish tomorrow.

[n-glaz]

Looking forward to trying this out! :)

[sachinraja]

@MatsDK If you can get around to it, a video showing off the new playground (like what we currently have on the README) would be great. Otherwise, I can get to it later.

Also there seems to be an issue when switching/moving around tabs. The code value in the editor seems to change. Sometimes it changes to the default value, other times it changes to the value of another tab.

[sachinraja]

@MatsDK @n-glaz this is now published, update trpc-playground to 0.3.1.

[MatsDK]

Thanks for merging this PR.

I think the issue with the tabs is that we are only setting the tabs state in the useLayoutEffect when you switch tabs.

https://github.com/sachinraja/trpc-playground/blob/2ba7d62272c62b82b4334db4bf3bf6621eacb37c/packages/components/src/components/editor.tsx#L98-L108

Maybe we should listen for onUpdate on the editor, what do you think? Should I create an issue for this?

[sachinraja]

I chose that way because setting the state on every input seems inefficient. It would re-render the editor on every change.

[MatsDK]

Oh yes, how can we make sure that changes get stored inside localstorage and do not get lost when the paged is refreshed or something? Maybe something similar like the refreshTypes polling with an interval?

[sachinraja]

I think we can just hook into the onbeforeunload event