Is it possible to use Graphql generated schema as Flow definitions? - javascript

I have a project that uses the convo GraphQL, Relay and Flow. Is there a way to use GraphQL schema to feed Flow so the React props can be typed without redeclaring the types?
For Relay I'm already using the script that generates two files: schema.json and schema.graphql. The Babel plugin uses schema.json to translate the queries into javascript.
The other file, schema.graphql looks similar to Flow syntax definition for types, but there are differences. I've tried once to import type {Definition} from "./schema.graphql" from it but was failing silently.

The problem with that is GraphQL scalar-types can be used to represent values in various formats and they do not inherit from a base type you could fall back to for flow.
Scalar can not only verify a "string" but "string of 32 hexadecimal digits". It's not possible to declare this kind of type in flow.
Here are some alternatives: babel-plugin-typecheck, json-to-flow

So after a while I decided to tackle this since our project started to grow and we started to loosen our types. In the end the simplest solution has been to grab the printerSchema and modify it so it outputs flow friendly text, save it to a .js file and point libraries to there.
I'll try to post it in github in a later date

Related

Is there any way to access existing visual studio type data or vscode extension outputs?

I'm currently trying to write my own VSCode extension.
The purpose of this extension is to compare types of HTML Custom Attributes and javascript code expressions.
Now, it's completely possible to get the type of HTML attributes, there are NPM packages and as long as they're documented via JSDoc or have proper types using typescript - no problem.
but now look at the following example:
/** #param {MyPage} page */
export function renderSomePage(page)
{
return html`
<my-component .my-attribute="${page.SomeProperty}"></my-attribute>
`
}
the question now is, how do I get the type of the expression ${page.SomeProperty}? This is the main question i want to solve with this question.
I have some ideas.
visual studio does already know what type this expression is. Because when i hover over the parts of this expression, then i get a hover showing me the type. So ideally i want to receive some kind of Dictionary of tokens mapped to types that VSCode must have somewhere
there's always the typescript/javascript language support plugin in VSCode that probably does all that work for the IDE. I'd need to get exactly those compiling/parsing results to get to the type of this expression
of course there are also corner cases, where it's not that simple. I also need to be able to evaluate expressions like:
(args) => result
identfiier.function()
primitive types (string, number, boolean)
arrays of complex types
anonymous objects
arrays of anonymous objects
You didn't mention anything about an LSP, which tells me that that is what your missing.
Bellow is in reference to idea #1 in the question:
The type information that you see when hovering is generated by the "TS LSP", which stands for...
"TypeScript Language Server Provider"
What you want to do is use a feature called "Request Forwarding" to access the information already present, which is provided by the VSCode LSP.
I believe that the node Language server provides features for TypeScript, and always runs in the background. This is because VSCode runs in a Node RTE, and it has built-in features that are written in TypeScript. If you were writing a language like Go (or Go) per-say, then you would need to call to that specific language server.
You can use the "VS Code Language API", which makes requests to language servers. The API is written to work with language server that adheres wholey to the "Language Server Protocol". to access the "Programmatic LSP Features".
VSCode has a few examples that demonstrate how to use the LSP.
Really, you have two options, you can...
...parse TypeScript yourself, write grammars for the embedded mark-up, pull out all the type info, and write the type checking software you intend to write, or you can...
...use the already existing LSP to access the info, which includes requests for type info, and then write the type-checking software.
Hopefully that points you in the write direction.

TS: How to get interface from a dynamically created object

I have a schema object that contains the typed property that starts empty.
const schema = {
typed: {},
// ...
}
schema.typed will be filled dynamically when the application starts, example
typed['name'] = 'Yung Silva'
typed['age'] = 22
in another moment
typed['facebook'] = 'fb.com/yungsilva'
typed['whatsapp'] = 81981355509
there is no pattern, really each time the application is started it will be a totally different and random structure.
I would like to get an interface for this object that was dynamically assembled, example
type Fields = typeof schema.typed
it is possible?
is disturbing me at the beginning, at the moment to create the object dynamically, I don’t know what type to define for schema.typed
This is not possible since Typescript "checks" your types at compile time.
"The goal of TypeScript is to help catch mistakes early (before running the code, at compile time) through a type system and to make JavaScript development more efficient." more
At runtime the code that runs is a normal (sorta) javascript code.
there are several libraries (typescript-is) that can help you check types at run time, but the common use case doesn't need them.
TypeScript is about type checking ahead of runtime. Its purpose is to check the code consistency with itself and the third party library it uses, before running it. TypeScript won't be able to assign a type depending on the actual data, because it simply doesn't exist anymore at run time. When you write will be a totally different and random structure that means you're using plain JavaScript and its dynamic nature, so if your data never has common parts, just don't type it at all (or as any).

Typescript and REST API response

Let me preface this question by saying that I am fairly new to typescript, but a long time JavaScript developer.
I have an existing JavaScript application that I am looking to transition over to typescript. In the JavaScript app, it makes a rest API call to fetch data, then checks to see if it exists, and then conditionally renders the app. In JavaScript, I can dynamically check to see if Properties exist on the response object and conditionally render that. In typescript, it throws an error because the data is of any type, and it doesn’t know if that property exists or not.
In a typescript application, is it pretty common to go create types for all of your API responses, so that you can get type safety on them? Using node as your backend, I could see a huge opportunity where you might be able to share backend and front end models. I am currently using .net core for my backend, and I am concerned I might be shooting myself in the foot trying to always create typescript models from the entity framework models.
Does anyone else use .net core for the backend and react on the front end? How do you handle API responses in typescript?
I can't tell you if it's common, but we write json-schema files for every endpoint. These schema files are:
Used to validate request bodies and generate errors.
Used to generate documentation.
Converted in to typescript types, which are used in both front- and backend.
We are using the same stack as you--.Net Core backend/React frontend--with typescript. The way we handle it is by creating types for the objects the backend sends us and then converting the dynamic checkers, like the ones you mention, into user-defined type guards.
So, roughly speaking, for the various data transfer objects the server returns we have a type/type guard pair that looks like this:
// type
export type SomeDto = { someKey: string; someOtherKey: number }
// type guard
export const isSomeDto = (returnedObj: any): returnedObj is SomeDto =>
returnedObject.someKey && typeof returnedObj === "string"
returnedObject.someOtherKey && tyepeof returnedObj === "number"
Then we have basically have the following in the fetching code:
const someReturn = fetchDatafromApi(endpoint)
if isSomeDto(someReturn) {
//now typescript will recognize someReturn as SomeDto
} else {
// throw or otherwise handle the fact you have bad data from the
// server
}
This way you get the dynamic checking in javascript at runtime and type safety at compile time. These guards aren't super-fun to write (and you'll want to unit test them all), and I imagine if the possible number of objects was bigger we'd opt for a more automated solution like #Evert mentions in the other answer. But for a few objects, and existing javascript validators, it is a pretty convenient way to get typing on your API returns.

Strongly typed GraphQL queries

I'm setting up a project with Vue CLI, using axios as my request library. All of the examples that I've seen uses a string as the query, e.g.
{
hero {
name
friends {
name
}
}
}
Since I'm using typescript and have typings for the entities, is there any way to generate the query using some kind of fluent framework or similar, so that I can work with intellisense instead of plain strings?
Most clients require you to provide the query as a string. You can use an IDE like GraphiQL, GraphQL Playground or Altair to provide features like autocompletion and syntax highlighting when writing your query. Certain editors also have plugins that offer similar functionality. If you're using TypeScript, you can typically use something like GraphQL Code Generator or Apollo CLI to then generate the types based on your queries and your schema.
The only client I'm aware of that is generated from your schema, allowing you to use a fluent API instead, is GraphQL Zeus.

Remap Java calls in JavaScript Nashorn

I am currently trying to make JavaScript support for the game "Minecraft" using Nashorn. My goal is to give users the ability to create their own commands and features.
For the most part it is working fine so far but the problem is that Minecraft's code is obfuscated when using it with Forge.
For that reason all field and method calls have to be re-mapped with their corresponding srg names.
Example: mc.thePlayer.swingItem(); to mc.field_71439_g.func_71038_i();
I am able to inject code into the Nashorn library using Mixin and I have already made a parser for the srg file. In a nutshell, what I need is the method I can use to replace thePlayer with field_71439_g or swingItem()V with func_71038_i()V before actually executing the code.
I have already tried finding the proper methods for hours.
https://github.com/CCBlueX/LiquidBounce1.8-Issues/issues/2649
You need MCPbot
Or rather, its mappings exports.
Note that MCPbot, as its name implies, is a bot. Specifically one on an IRC channel so that mod developers can go "hey I figured out what func_12345_a does" and tell the bot, giving it a human-readable name, named parameters, and javadoc and the next build of Forge will include these updated mappings for modders to use.
(The "MCP" part stands for "Minecraft Coder Pack.")
You can find exports of the SRG name mappings on the MCPbot website of which you'll need both csv files: Fields and Methods (as they're exported separately).
I will note, however, that including these mappings in your mod will probably violate copyright and you should check with Prof Mobius before using them in this manner.
Solution
Just inject into this methods of "jdk.internal.dynalink.beans.AbstractJavaLinker"
Remap methods:
addMember(Ljava/lang/String;Ljava/lang/reflect/AccessibleObject;Ljava/util/Map;)V
Remap fields:
addMember(Ljava/lang/String;Ljdk/internal/dynalink/beans/SingleDynamicMethod;Ljava/util/Map;)V
setPropertyGetter(Ljava/lang/String;Ljdk/internal/dynalink/beans/SingleDynamicMethod;Ljdk/internal/dynalink/beans/GuardedInvocationComponent$ValidationType;)V

Categories

Resources