https://github.com/blackcoder56/graphqlapi_-_django_connection
Fetching data from django application to Vuejs frontend using graphql api -> research
https://github.com/blackcoder56/graphqlapi_-_django_connection
api django graphql graphql-schema python3 vitejs vuejs
Last synced: 4 months ago
JSON representation
Fetching data from django application to Vuejs frontend using graphql api -> research
- Host: GitHub
- URL: https://github.com/blackcoder56/graphqlapi_-_django_connection
- Owner: BlackCoder56
- Created: 2024-08-22T20:28:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T21:03:35.000Z (almost 2 years ago)
- Last Synced: 2025-01-11T08:48:37.964Z (over 1 year ago)
- Topics: api, django, graphql, graphql-schema, python3, vitejs, vuejs
- Language: Python
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### GraphQLAPI_-_Django_connection: Retrieving Data from Django to Vue.js using GraphQL API
NB: You can follow steps in this file to get more knowledge on how to create the project. OR just clone the repository:
```bash
$ git clone https://github.com/BlackCoder56/GraphQLAPI_-_Django_connection.git
## Features
- Django
- Vue.js
- GraphQL API
- GraphiQL
- Create, read, update, and delete operations for entries[employess], cities, and titles.
- Filtering and querying using GraphQL.
- Mutations for managing employees, cities, and titles.
- Django integration with GraphQL using `graphene` and `graphene-django`.
---
## Step 1: Create Project Root Directory
**Preparing project directories**
## 1. Create the project root/main directory:
```bash
$ mkdir
## 2. Enter the root project directory:
```bash
$ cd
## 3. Create frontend and backend directories:
```bash
$ mkdir frontend backend
## Step 2: Setting up the Backend
**Creating the Django Project:**
- First navigate to the backend folder;
```bash
$ cd backend
## 1. Install Django:
```bash
$ pip install django
## 2. Create a virtual environment:
```bash
$ python3 -m venv env##
## 3. Activate the virtual environment:
```bash
$ source env/bin/activate
## 4. Create the Django project:
```bash
$ django-admin startproject .
## 5. Create a Django app (example: test):
```bash
$ python manage.py startapp
## add app in installed apps in settings.py file
INSTALLED_APPS = [
…
‘’,
]
## 7. Define models in models.py and run migrations:
```bash
$ python manage.py makemigrations
$ python manage.py migrate
## 8. Update admin.py to register models and create a superuser:
```bash
$ python manage.py createsuperuser
## 9. Run the server and log in as an admin to create some values:
```bash
$ python manage.py runserver
##Step 3: Configuring the GraphQL API
## 1. Install necessary packages:
```bash
$ pip install graphene-django
$ pip install django-filter
## 2. Update settings.py:##
## ◦ Add 'graphene_django' to INSTALLED_APPS.
INSTALLED_APPS = [
…
'graphene_django',
‘’,
]
## ◦ Add the following in settings.py file to configure Graphene:
GRAPHENE = {
'SCHEMA': '.schema.schema',}
## 3. Create schema.py files:
## ◦ In the app directory (e.g., test/schema.py), define your schema.
## ◦ In the project directory, create schema.py to tie all app schemas together.
## 4. Update urls.py in the project directory to include GraphQL IDE:
## from django.urls import path
## from graphene_django.views import GraphQLView
## from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True))),
]