I'm just starting to look at creating a React Graphql and Typescript app
I have the schema and resolvers and a server working using apollo-server, I can see the graphql playground.
I also have a client folder that contains my react app. I created the react app using the --typescript flag so it produces .tsx files and a tsconfig.json.
I'm looking into creating a Typescript definitions for the graphql queries
So my file structure is something like this.
client
react.tsx files
package.json
resolvers.js
schema.js
server.js
My simple question is should the server side files like schema.js and resolvers.js be .js files or should they somehow be .ts files. I'm sure they should be .js files but I can't find any information about it.
You might want to consider looking into a tool like apollo-codegen for this. Otherwise you'll have to write out your typescript types manually.
For a small project, this may be trivial, but for a larger one you might want to start generating the types based on the gql schema as your source of truth.
Related
I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:
A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b
The React app's .tsx components will pull from project-a's .ts files.
I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!
When I run the application, Webpack complains:
./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export enum Position {
| Inner = 0,
| Outer = 1
I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?
The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.
Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?
You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.
The type infos you get from external packages is delivered via the .d.ts file alongside the package.
When you import other packages, you always import the Javascript file.
Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript.
But you are trying to import a Typescript file during runtime.
I have created a fresh app using Vue CLI (PWA is enabled). I want to generate an asset-manifest.json file but with the exact same structure like what Create React App generates.
For example, the asset-manifest.json file of a fresh app created by CRA, looks like this:
But Vue doesn't generate such a file and I had to install webpack-assets-manifest and then by adding the following configuration to vue.config.js file:
I was able to make the app generate this file for me. But obviously the output looks like this:
The question here is that how I can configure my Vue app to generate this file with the exact structure of React app (generating chunks automatically, categorizing by entrypoints and files keys, as well as generating the main.chunk.js, bundle.js files, etc.)?
I am not professional at Vue and I am used to React. So, any suggestions or thoughts from experts are welcome.
I wanted to have files key, so I used the transform option like this. I also renamed app.js to main.js. This customization were enough for me, for now.
I want this to be generated during development build as well and generate bundle.js, but it doesn't generate this file till I run yarn build which I have to research on. Let me know if you have any ideas.
You can use the entrypoints: true to generate entrypoints key.
The generated file was like this
I tried to utilize reactAdmin but i have some questions in file hierarchy why .ts , tsx and .js files are there in one use of single screen , May i know the usage of that and how to handle the API's integration within interlinking the data.
And also is there any solutions of handling .tsx functions or components in .js file as im very much familiar with .js than ts or tsx.
React AdminA Web Framework for B2B applicationsmarmelab.com
They typescript files which gonna be eventually compiled to javascript. So you can just use javascript code as reference, there is no need to look at those .ts or/and .tsx file, you should look at them when you want to learn typescript.
It checks variable types at compile time in 'your code'.
If you are new to javascript, first learn it, and not necessary to learn typescript, but you "may may" need it in future.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I have a React project that uses TypeScript and GraphQL using apollo.
I have a global Type file that has all the required files. It is generated from the schema.json file , by running apollo-codegen
The steps I follow are:
Run the GraphiQL
Copy the response of POST request to graphQL
Paste it in the schema.json file
Create the graphQL query ( .graphql file )
Run apollo-codegen
Is there a better way to do this programatically ?
I'm not sure what part of the code to share along with this question.
You can use gql2ts and then run $ gql2ts schema.json
I have had great success with the following project: https://graphql-code-generator.com/
Works amazing across your graphql server and client implementation.