How to setup and use multiple Graphql endpoints in React - reactjs

I want to setup two graphql endpoints for my project, one of the endpoints exposes schemas i use on a different part of the application, and the other i want to use for my graphql subscription, but i don't know how to setup my application to use multiple endpoints.
Remember that the split method can only take one http link and one websocket link. Now i don't know where the second endpoint for my subscription would come in.

Related

Integration of Front End and Backend

I am planning on creating a React/Django web application. I plan on creating an API on the backend to communicate with my React app. I understand you can integrate React with django by including your react app in the django project directory and pointing to the index.html in react.
I'm still not sure what the benefits of this are. Would it be better just to separate the django and react application. Whenever I would need to store or retrieve data I could just make requests the django API?
The best approach is to separate, and use DRF (Django Rest Framework), this library will offer serializers which basically going to interpret your request and then process it in a view class/function in Django, the whole process goes like this (between frontend and backend):
You create the tables in database (models).
You create the views, and some views are going to retrieve data from the serializer, to process the request being sent from client side (react).
You map the views to urls.
Now react part:
You make some api calls.
The request is sent to backend (in this case it is django).
The request is sent as "JSON" data format, but python does not understand such format, this is why serializers exist! the serializer will interpret the data and convert it to something that python understand (a dictionary), and then the request is going to be processed by a view.
A response will be sent to react.
Hope this clear it for you, for more info about DRF:
https://www.django-rest-framework.org/
also serializers can also change the lookup field for some resource in your backend, which is pretty useful when you want to look up for name instead of an id in the url
more info about serializers:
https://www.django-rest-framework.org/community/third-party-packages/#serializers
The better is to separate the two projects because a lot of reasons, The main reason is when you need to build a mobile or desktop application on the same backend or database here comes the advantage of APIs, there are a lot of reasons such as: separate the servers to handle requests of both frontend (static files) and the backend (APIs and DB).

Secure webapp with Django and React

I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)

How to implement mailing server with Next.js?

I am pretty new to Next.js and I want to implement a mailing feature for a contact form which I have on the site. Since Next.js is SSR, if we need to use a mailer I wonder: do we still need to have a separate backend environment where we then need to install the mailer (for example Node.js and Nodemailer) or we can install the mailer (for example Nodemailer) directly into the Next.js setup?
I know there is an option for having separate Node.js server, proving an API endpoint and using this endpoint for triggering the method where we will send emails (and probably send all the values from the contact form as a parameters in the endpoint), but I wonder if the Next.js allows direct implementation of a mailer nested directly into it's setup.
Next.js allows for creating custom API routes right within the project.
Here are the Docs:
https://nextjs.org/docs/api-routes/introduction
You need to create files in pages/api and the endpoint will be mapped to /api/*

Connecting to multiple GraphQL endpoints from multiple domains in a single react app

This is more a arhitecture/design question. I have a Postgres database that holds multiple schemas. Each schema is associated with a GraphQL endpoint. For instance:
client1.example.com/graphql/
client2.example.com/graphql/
For the frontend I have a single react app. At the moment I need to point the react app to a single graphQL endpoint. What I would like is to have a single react app that maps to the appropiate graphQL endpoint. For instance:
client1.com connects to client1.example.com/graphql/
client2.com connects to client2.example.com/graphql/
What is the best way of achieving something like this. Is this possible using the react router or some sort of API gateway.
Any help is really appreciated.

AWS Serverless: configure multiple frontend apps under one domain

I have two frontend apps. First one uses Static Generation (for SEO purposes), and the Second one uses Client Side Rendering (for all stuff behind auth flow).
I want to have both of them under the same purchased domain, with the base endpoints to be something like:
mydomain.com\public\* : for all my public facing statically generated content using the first App.
mydomain.com\auth\*: for all the stuff that lies behind the auth flow.. made using the second app.
So the question is:
How to map these two separate apps to two base endpoints under the same domain? I was reading this post Share an API Endpoint Between Services, but it seemed to be for the backend.
In case anyone is interested to know why two separate apps:
It's because the Static generation is done using Next.js, while the Client side stuff is done using simple create-react-app. This post explains why this combination needs to be separately deployed.
Refer to this
Create two separate s3 buckets for your NextJs and React app. Attach them to a CloudFront distribution. Attach a lambda function to your CloudFront distribution and route requests to different origin based on whether the request.uri.startsWith('/public') or not.

Resources