I am writing a web app in WebStorm based on GraphQL. The web app is comprised of two components (i.e. frontend and backend). On the backend, I am using makeExecutableSchema to create multiple schemas and then merging them together to help maintain my code.
The frontend relies on a WebStorm plugin called JS GraphQL that helps interpret GraphQL mutations and queries as described here. The plugin expects to see a .graphql file to understand typedefs. I can manually copy/paste information from the backend to the frontend directories. Ideally, I would automatically generate the .graphql file for the frontend during the backend coding. Does anyone have insight on how to accomplish this?
Have you looked into graphql-code-generator? It has a plugin architecture and so can be adapted to a variety of needs. I've been on teams that have used it successfully on a few projects, and it's not hard to hook up to CI or whatever.
Related
I am now about knee-deep in a new Gatsby 4 project and may have hit a wall. I can't figure how to do CRUD in Gatsby with Sanity as my backend. Can I do GQL mutations in Gatsby GraphQL? I can't find any examples or tutorials anywhere.
I have done this in Next.js in a different project a but my backend was very different in my new project.
Any help is great.
I do not agree with #fstr's answer. All you can do in React can be done in Gatsby since it's a React-based framework.
if you mean using Gatsby data layer and by that the graphql portion of
it to apply a crud functionality in your site, then no. Gatsby's data
layer is a "one way street" it's designed to pull in data, if you want
to use mutations and/or subscriptions, you'll have to use something
like Apollo to handle the mutations aspects of the data.
This means that Gatsby fetches and gathers the data from the sources (like Strapi) when it builds the site (that's the one-way). The only thing you need to take into account is that because of Gatsby's staticity, you won't be able to create new pages on-demand (or on-the-fly) based on the user's input for example. If that's your scenario, you will need to trigger webhooks or to serve the site in the server, as Next and Gatsby v4 does.
If your use-case is, for example, display some database (or Strapi) fields, manipulate/mutate them based on some user's actions/inputs, and fetch them again to display them on the screen you can easily do using any Apollo implementation as this article, and many other, explains (Implementing CRUD in web application using React and GraphQL). In this case, you won't be taking many benefits of using Gatsby rather than any other CRA or React site, but it can be done either way.
So summarizing:
If you want to create dynamic pages based on some user's action, Gatsby won't help you much because you'll need to rebuild the site again, so it won't bypass the staticity.
If you want to mutate some data, send them back to the server, and display them again, it can be easily done.
If you mean modify your data stored in Sanity via Gatsby and then get Gatsby to show the updates in real-time (faster than rebuilding the whole site), this isn't something Gatsby will help you with as far as I know. Relevant:
https://github.com/gatsbyjs/gatsby/issues/22012
if you mean using Gatsby data layer and by that the graphql portion of it to apply a crud functionality in your site, then no. Gatsby's data layer is a "one way street" it's designed to pull in data, if you want to use mutations and/or subscriptions, you'll have to use something like Apollo to handle the mutations aspects of the data.
and
This is a good question! Gatsby data layer exists only during build time. After that, it is transformed into HTML and plain JSON files which you can deploy as a static site.
So at the moment if you want to use Apollo on the client, you need a separate GraphQL server.
Sanity does have an API you can use to modify data though:
https://www.sanity.io/docs/http-mutations
I have an application in which UI is rendered on the server-side using Thymeleaf and the backend is in Spring Boot.
Now, we have a requirement to combine this application with another react application. So, it should be like micro frontend architecture.
For this, I am evaluating the framework Single-SPA and seems like a good option when we have separate frontend projects and we need to combine them in one.
Is it possible to integrate the existing SSR pages with Single-SPA?
This should be possible with single-spa-html as long as there is no JavaScript that is dynamically created. Another limitation is that single-spa-html doesn't process <script/> tags due to browser security. If your application can meet those requirements, it should be able to interop with single-spa-html.
single-spa-html allows providing a template asynchronously, so a fetch or ajax call could retrieve the microfrontend template from the backend. Then the corresponding JavaScript is included in the microfrontend instead of script tagged in.
You can also see an example of enhancing a static html mfe with JS here: https://github.com/filoxo/single-spa-html-with-js-example/
Note: I believe we discussed this on the Slack channel but I want to share here for the benefit of the wider single-spa community.
I'm trying to integrate backend code into a Wix site. Im not too picky about how I want to do this, or what language to write in (ideally, I have a locally-hosted Java code that I'd love to simply call). I wouldn't mind re-writing it in JavaScript though, or another language. But before I decide that I'm confused about my options. I can code but I'm new to the concepts like modules, APIs, & servers.
According to my research, back-end code with Wix is supposed to be easy (or at least do-able and not THAT complicated)....
From this webpage https://support.wix.com/en/article/corvid-calling-server-side-code-from-the-front-end-with-web-modules,
"Web modules are exclusive to Corvid and enable you to write functions that run server-side in the backend, and easily call them in your client-side code. With web modules you can import functions from backend into files or scripts in public, knowing they will run server-side. Corvid handles all the client-server communication required to enable this access."
And from this: https://www.sitepoint.com/what-is-wix-code/
"It’s serverless: All this added functionality comes in a serverless environment that lets you get your work done without any of the normal full-stack development headaches.
Just code and go: Wix Code has a built-in, online IDE and backend so you can just add the code you need to your page or your site, publish, and you’re live."
So, I thought they have a backend IDE where I can write backend code directly, or I could call my Java program. But, as I tried doing this and finding tutorials, it seems I can really only do this by calling a public API from the backend...?
https://youtu.be/tuu0D1izrUU
But ive also read (and someone who supposedly has done it before told me this) that Wix integrates with node.js, which is a backend version of JavaScript.
Can I use a Wix domain for a NodeJS app?
But, when I go into my Wix site I cannot find any option for using Node JS, and doing research on that gives me no useful results.
So, I'm thoroughly confused on what the capabilities are here. Can someone help me make sense of this?
Why are there no tutorials showing explicit code in the Corvid backend module? What's stopping me from simply writing my Java program there in a module? Do I really need an API endpoint to call and pass to the front end?
Is Node JS supported or not - has anyone done this before?
Also, in one link above they said everything is "serverless". But if I have to set up my own API endpoint won't I need to set up my own server??
There are basically two ways to go about this, which you seem to have already discovered.
Write your backend code in your Wix site. Indeed, the backend is built on Node.js as you can see here. Using this approach you will have to use JavaScript. As you seem to have found, you write this code in the Backend section of your site in a Web Module. Pros: you don't need to worry about managing a server and all your code is in one place.
Expose your already existing Java code as an API that your Wix site can call using the wix-fetch API. Pros: you don't need to rewrite your code.
I'm searching for a way to automatically generate the TypesScript client code from a ASP.NET Core Web-Application (Currently using Visual Studio 2017RC and webpack).
Are there any existing tools to generate the TypeScript client either in the build pipeline from visual studio or with webpack? I tried to use swagger middleware and then generate to client from the swagger URL, but I'm not sure if the intermediate swagger generation is the right tool for the job. Also the disconnectedness from the build tools is not ideal.
Both NSwag and Swashbuckle/swagger-codegen are awesome.
Typewriter is another awesome option.
So, here is how I would take the decision:
Need to generate TypeScript Models as per the C# models, go for TypeWriter
Need to generate complete client side code with command line that you can add as a build or publish step go for Swagger Code Gen
Need to play with the generated Swagger Spec or Generated Code to add your customizations - go for NSwag
Need to show Client inline code snippets in Swagger UI, use SwaggerUI-snippets
You can add Swashbuckle to your ASP.NET Core webapp and then generate Swagger/OpenAPI spec.
With the Swagger/OpenAPI spec, you can then use Swagger Codegen to generate not only TypeScript API clients (Node, Angular, Angular2, Fetch), but also API clients in C#, Java, JS, Swift, etc as well as API documentation.
The easiest way to try Swagger Codegen is to use https://editor.swagger.io by importing your spec and then select the target API client/server you want to generate. (https://editor.swagger.io leverages https://generator.swagger.io to generate code and generator.swagger.io is powered by Swagger Codegen)
Swagger Codegen can also generate server stubs in C# Nancyfx or ASP.NET core so you may consider following the contract-first approach by writing the spec using https://editor.swagger.io and then generating both API clients and server stubs.
UPDATE: On May 2018, about 50 top contributors and template creators of Swagger Codegen decided to fork Swagger Codegen to maintain a community-driven version called OpenAPI Generator. Please refer to the Q&A for more information.
Another option is NSwag which can generate Swagger specs from your ASP.NET (Core) controllers and TypeScript clients from this Swagger spec (for Angular, AngularJS, Fetch, etc.). The integration is very simple and it supports many advanced features (inheritance, named enums, code extensions, etc).
http://NSwag.org
Using the NSwagStudio UI it is very simple to get started and then you can automate everything with NPM package (i.e. running the config file in the cmd line).
I'm one of the authors of the project.
If you need to generate DTOs and API clients, then your options are
NSwag. The most popular tool for the job. But it generates everything in one file that makes it hard to maintain/debug.
Swagger Codegen or its fork with more features OpenAPI Generator. A Java-based option producing separate files, but with limited customisation.
AutoRest. A npm solution for packing up API clients in npm packages.
WebApiClientGen. A solution mentioned by the author below in this thread.
TypeWriter. VS extension, where you can craft your own implementation.
If you need DTOs only, then I'd look towards
Reinforced.Typings
TypeGen
More on these tools in this post - 6+ ways to marry C# with TypeScript.
You can also take a look at autorest.typescript client code generator. It provides good interfaces for all the model definitions, accurately defines readonly properties and enums. It supports a bunch of custom extensions that can be useful to improve the user experience of the generated client. You can take a look at some generated sample clients.
Bonus: The generated typescript client works in node.js and also in the browser.
If your TypeScript clients are with jQuery or Angular 2+, an alternative ASP.NET Web API Client Generators may be more handy, less overhead than swagger toolchain during SDLC.
And it supports .NET Core in addition to .NET Framework and .NET Standard.
Yet another option where you have full control over generated code is NTypewriter, which is basically Typewriter clone, but it uses Scriban syntax for templates.
I'm working on learning node.js as a possible tool for web development. I understand how express.js works, but I'm not sure how to integrate mongoose models, I've tried searching google and here for an answer with no luck. Where should models go? Should they go in app.js, with the rest of the configuration and rorouting information? or should they go in a seperate file and imported like a normal module? Any information and resources would be appreciated. Thank you.
I would recommend putting your models in separate files even if just for code organisation purposes. Create them as normal node modules and export the schema. Import the schema into your app.js and model them there:
var ModelSchema = require('models/model');
var model = mongoose.model('Model', ModelSchema);