No, that is not a typo. I want to create a GRANDJstack type application. It is similar to what @lyonwj has done in full JavaScript with GRANDstack, but a bit different. Why GRANDJ? Because I am more of a Python person and not a JavaScript person. I wanted to use Django as a backend along with Jupyter Notebooks to create my stack for a personal project I call LEGObase. It is best described as below:
- It can start with a Neo4j database running on the localhost. This works no problem.
- I load data into Neo4j using a Jupyter notebook and the python neo4j driver library. The data in this case is from CSV files from the website Rebrickable. This works no problem.
In a previous project, I had used Django as method to log users into the application. These users had attributes like "company_id" in which they could make database mutations to their corresponding "Person" objects in the Neo4j database. I wanted to keep Django in the mix here, but avoid writing a bunch of cypher statements, but use the GraphQL functionality for queries and mutations.
-
Django is used here for some custom authentication and authorization to the application users. Django is setup to allow users to register, login and logout all while serving JWT in the headers. It will server the JWT with the Bearer claim and also provide a "role" and "company_id" attribute that GraphQL can decode for it's auth methods or use in cypher. The JWT and user models were setup in a similar way to most youtube videos dealing with the Django Rest Framework (DRF). This works just fine.
-
Along the DRF lines, there are videos that show how to incorporate React as a frontend to the DRF, and that is what I have followed up to this point. So, React was not created from the GRANDstack starter. The tutorials incorporate the use of the axios package. An instance of axios will connect to the "baseurl" to get a token. In this case the baseurl is the django server. This all works just fine.
To GraphQL for a moment. I originally tried to get Graphene to work with Django. It can work just fine for data stored within Django, but I could not get it to connect with Neo4j. I even tried using Neomodel but the objects would never retrieve.
- So I installed GraphQL using the GRANDstack starter as API-ONLY. The nice thing about this is that, it works pretty much out of the box, it can initialize the database with constraints, and it can infer schema. So, this implementation of GraphQL works fine.
So where is the question in all of this? Well, I can't seem to get my React application to talk with the GraphQL server. I feel like I am trying something that has not been done, or at least documented before. Obviously the React tutorials I watched were geared toward Django and its singular endpoint. But I have multiple API endpoints: Django for Authorization, GraphQL for Neo4j queries/mutations, and possibly other endpoints in the future. Trying to follow React on the GRANDstack uses different Authorization frameworks, like Auth0. The React examples there use the { useQuery } from @apollo/react-hooks and gql from the graphql-tag libraries. I guess the question becomes, how can I create my React components using gql and {useQuery} like the GRANDstack examples, but somehow carry the authorization headers that are stored by the axiosinstance from when a user logged in and got a token, then point the request to a different API endpoint (not Django) that is served by the GraphQL server, to render the data in the end?
It actually sounds simple, but my javascript abilities are only a few weeks old. I am open for other suggestions on how to accomplish this as well so long as they fit in the base framework.
For those that are interested, my code can be found here: