Skip to content

Commit

Permalink
feat: Adds apollo graphql (#275)
Browse files Browse the repository at this point in the history
**Overview**
* Adds apollo graphql
* Adds auto type generation script
* Fixes the allowed_hosts issue on local.py

---------

Co-authored-by: sedatbasar <sedat@whitespectre.com>
Co-authored-by: Roché Compaan <roche@upfrontsoftware.co.za>
  • Loading branch information
3 people authored Jul 8, 2024
1 parent 4e5e14d commit c3d4f20
Showing 24 changed files with 4,859 additions and 447 deletions.
Original file line number Diff line number Diff line change
@@ -11,7 +11,10 @@
default="!!!SET DJANGO_SECRET_KEY!!!",
)
# https://docs.djangoproject.com/en/dev/ref/settings/#allowed-hosts
ALLOWED_HOSTS = ["localhost", "0.0.0.0", "127.0.0.1"] # nosec
ALLOWED_HOSTS = env(
"DJANGO_ALLOWED_HOSTS",
default=["backend", "localhost", "127.0.0.1"],
)

# CACHES
# ------------------------------------------------------------------------------
1 change: 0 additions & 1 deletion {{cookiecutter.project_slug}}/frontend/.env.example

This file was deleted.

3 changes: 3 additions & 0 deletions {{cookiecutter.project_slug}}/frontend/.env.local.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
IS_PRE_PUSH_HOOKS_ENABLED=true
NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://localhost:8000/graphql/
NEXT_GRAPHQL_ENDPOINT=http://backend:8000/graphql/
22 changes: 20 additions & 2 deletions {{cookiecutter.project_slug}}/frontend/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:jsx-a11y/recommended"],
"plugins": ["jsx-a11y", "unused-imports"],
"rules": {
"no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
@@ -27,7 +27,25 @@
],
"object-shorthand": ["error", "properties"],
"react/jsx-no-useless-fragment": "error",
"require-await": "error"
"require-await": "error",
// disallow specific imports
"no-restricted-imports": [
"error",
{
"paths": [
{
"name": "@apollo/client",
"importNames": ["gql"],
"message": "Use the @/__generated__/gql to get proper typings!"
},
{
"name": "@apollo/client/core",
"importNames": ["gql"],
"message": "Use the @/__generated__/gql to get proper typings!"
}
]
}
]
},
"parserOptions": {
"project": ["./tsconfig.json"]
1 change: 1 addition & 0 deletions {{cookiecutter.project_slug}}/frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -35,3 +35,4 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
!lib/
4 changes: 2 additions & 2 deletions {{cookiecutter.project_slug}}/frontend/.husky/pre-push
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
cd frontend
if test -f ./.env; then
source ./.env
if test -f ./.env.local; then
source ./.env.local
if [ "$IS_PRE_PUSH_HOOKS_ENABLED" = "true" ] || [ "$IS_PRE_PUSH_HOOKS_ENABLED" = "1" ]; then
npm run format-check
npm run lint-src
3 changes: 2 additions & 1 deletion {{cookiecutter.project_slug}}/frontend/.prettierignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules
.next
out
public
public
__generated__
2 changes: 1 addition & 1 deletion {{cookiecutter.project_slug}}/frontend/Dockerfile
Original file line number Diff line number Diff line change
@@ -14,4 +14,4 @@ COPY --from=build --chown=node:node /app/node_modules node_modules
COPY --chown=node:node . /app
USER node

CMD ["npm", "run", "dev"]
CMD ["npm", "run", "dev"]
24 changes: 15 additions & 9 deletions {{cookiecutter.project_slug}}/frontend/README.md
Original file line number Diff line number Diff line change
@@ -3,17 +3,29 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
## Getting Started

Running the development server:

Tilt will automatically deploy a NextJS container for development, and it is recommended not to run NextJS locally.

Update the .env.local.example file to .env.local
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
This project uses GraphQL for the backend, and Apollo Client for the frontend. The Apollo Client is set up in the `lib/apolloClient.ts` file.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Environment Variables

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
| Variable Name | Explanation |
| ---------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
| IS_PRE_PUSH_HOOKS_ENABLED | Controls husky pre-push hooks for frontend folder | {% if cookiecutter.use_graphql == "y" or cookiecutter.use_drf == "y" %} |
| NEXT_PUBLIC_GRAPHQL_ENDPOINT | The public graphql endpoint url |
| NEXT_GRAPHQL_ENDPOINT | The graphql endpoint url to be used for serverside queries | {% endif %} |

## Suggested Tools

[Apollo Client Devtools](https://chromewebstore.google.com/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm)
[GraphQL Network Inspector](https://chromewebstore.google.com/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln)

## Learn More

@@ -25,9 +37,3 @@ To learn more about Next.js, take a look at the following resources:
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

Check out the official [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## Environment Variables

| Variable Name | Explanation |
|-----------------------------|--------------------------------------------------|
| IS_PRE_PUSH_HOOKS_ENABLED | Controls husky pre-push hooks for frontend folder|

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 42 additions & 0 deletions {{cookiecutter.project_slug}}/frontend/__generated__/gql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

111 changes: 111 additions & 0 deletions {{cookiecutter.project_slug}}/frontend/__generated__/graphql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions {{cookiecutter.project_slug}}/frontend/__generated__/index.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 19 additions & 0 deletions {{cookiecutter.project_slug}}/frontend/codegen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
schema: 'http://localhost:8000/graphql/',
// this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
documents: ['./**/*.{ts,tsx}'],
generates: {
'./__generated__/': {
preset: 'client',
plugins: [],
presetConfig: {
gqlTagName: 'gql'
}
}
},
ignoreNoDocuments: true
}

export default config
Loading

0 comments on commit c3d4f20

Please # to comment.