Browse Source

fixed graphql mutations, cleaned up project

b_fix
crunch 3 weeks ago
parent
commit
9fc4fbd753
14 changed files with 102 additions and 101 deletions
  1. +18
    -5
      apollo/index.ts
  2. +2
    -2
      prisma/schema.prisma
  3. +0
    -2
      src/app/app.module.ts
  4. +1
    -1
      src/app/components/create-topic/create-topic.component.html
  5. +12
    -3
      src/app/components/create-topic/create-topic.component.ts
  6. +0
    -0
      src/app/components/topic-detail/topic-detail.component.css
  7. +0
    -11
      src/app/components/topic-detail/topic-detail.component.html
  8. +0
    -25
      src/app/components/topic-detail/topic-detail.component.spec.ts
  9. +0
    -18
      src/app/components/topic-detail/topic-detail.component.ts
  10. +9
    -9
      src/app/components/topics/topics.component.html
  11. +23
    -5
      src/app/components/topics/topics.component.ts
  12. +16
    -0
      src/app/services/global-variables.service.spec.ts
  13. +11
    -0
      src/app/services/global-variables.service.ts
  14. +10
    -20
      src/app/services/topic.service.ts

+ 18
- 5
apollo/index.ts View File

@@ -1,7 +1,6 @@
const { ApolloServer, gql } = require('apollo-server');
const { PrismaClient } = require('@prisma/client');


// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
@@ -16,6 +15,10 @@ const typeDefs = gql`
description: String,
}

type Mutation {
addTopic(title: String!, description: String): Topic
}

# The "Query" type is special: it lists all of the available queries that
# clients can execute, along with the return type for each. In this
# case, the "topics" query returns an array of zero or more Topics (defined above).
@@ -30,19 +33,29 @@ const prisma = new PrismaClient();
// schema. This resolver retrieves topics from the "topics" array above.
const resolvers = {
Query: {
topics: async () => {
topics: async () => {
const topics = await prisma.topic.findMany();
console.log("Fetched Topics: " + topics);
return topics;
}
},
Mutation: {
addTopic: async (args, parent, context, title, description) => {
const return_topic = await prisma.topic.create({
data: parent
});
return return_topic;
}
}
};

// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({
typeDefs,
resolvers,
cors: {
origin: '*'
},
typeDefs,
resolvers,
});

// The `listen` method launches a web server.


+ 2
- 2
prisma/schema.prisma View File

@@ -12,7 +12,7 @@ generator client {

model Topic {
id Int @default(autoincrement()) @id
title String?
description String
title String
description String?
}


+ 0
- 2
src/app/app.module.ts View File

@@ -5,7 +5,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TopicsComponent } from './components/topics/topics.component';
import { TopicDetailComponent } from './components/topic-detail/topic-detail.component';
import { StartComponent } from './components/start/start.component';
import { CreateTopicComponent } from './components/create-topic/create-topic.component';
import { GraphQLModule } from './graphql.module';
@@ -15,7 +14,6 @@ import { HttpClientModule } from '@angular/common/http';
declarations: [
AppComponent,
TopicsComponent,
TopicDetailComponent,
StartComponent,
CreateTopicComponent,
],


+ 1
- 1
src/app/components/create-topic/create-topic.component.html View File

@@ -1,6 +1,6 @@
<h3>Create a topic</h3>
<form [formGroup]="topicForm" (ngSubmit)="onSubmit(topicForm.value)">
<input type="text" placeholder="Topic Name" formControlName="name">
<input type="text" placeholder="Topic Name" formControlName="title">
<br>
<input type="text" placeholder="Topic Description" formControlName="description">
<br>


+ 12
- 3
src/app/components/create-topic/create-topic.component.ts View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder } from "@angular/forms";
import { Topic } from "../../types/topic";
import { TopicService } from "../../services/topic.service";
import { GlobalVariablesService } from "../../services/global-variables.service";

@Component({
selector: 'app-create-topic',
@@ -11,9 +12,10 @@ import { TopicService } from "../../services/topic.service";
export class CreateTopicComponent implements OnInit {

topic: Topic;
addedTopic;
topicForm;

constructor(private topicService: TopicService, private formBuilder: FormBuilder) {
constructor(public globalVarsService: GlobalVariablesService, private topicService: TopicService, private formBuilder: FormBuilder) {
this.topicForm = this.formBuilder.group({
title: '',
description: '',
@@ -24,9 +26,16 @@ export class CreateTopicComponent implements OnInit {

}

ngOnDestroy() {
if(this.addedTopic) {
this.addedTopic.unsubscribe();
}
}

onSubmit(topicData): void {
this.topic = new Topic(topicData.title, topicData.description);
this.topicService.addTopic(this.topic);
this.topic = {title: topicData.title, description: topicData.description }
this.addedTopic = this.topicService.addTopic(this.topic).subscribe();
this.globalVarsService.topicAdded=true;
this.topicForm.reset();
}



+ 0
- 0
src/app/components/topic-detail/topic-detail.component.css View File


+ 0
- 11
src/app/components/topic-detail/topic-detail.component.html View File

@@ -1,11 +0,0 @@
<div *ngIf="topic">

<h2>{{topic.name | uppercase}} Details</h2>
<div><span>id: </span>{{topic.id}}</div>
<div>
<label>name:
<input [(ngModel)]="topic.name" placeholder="name"/>
</label>
</div>
</div>

+ 0
- 25
src/app/components/topic-detail/topic-detail.component.spec.ts View File

@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TopicDetailComponent } from './topic-detail.component';

describe('TopicDetailComponent', () => {
let component: TopicDetailComponent;
let fixture: ComponentFixture<TopicDetailComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TopicDetailComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(TopicDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 0
- 18
src/app/components/topic-detail/topic-detail.component.ts View File

@@ -1,18 +0,0 @@
import { Component, OnInit, Input } from '@angular/core';
import { Topic } from '../../types/topic'

@Component({
selector: 'app-topic-detail',
templateUrl: './topic-detail.component.html',
styleUrls: ['./topic-detail.component.css']
})
export class TopicDetailComponent implements OnInit {

@Input() topic: Topic;

constructor() { }

ngOnInit(): void {
}

}

+ 9
- 9
src/app/components/topics/topics.component.html View File

@@ -1,11 +1,11 @@
<h3>All Topics:</h3>
<ul>
<div *ngIf="topics">
<li *ngFor="let topic of topics">
<p>
<b>Name: </b> {{ topic.title }} <br>
<b>Description: </b> {{ topic.description }}
</p>
</li>
</div>
</ul>
<ng-container *ngIf="topics">
<li *ngFor="let topic of topics">
<p>
<b>Name: </b> {{ topic.title }} <br />
<b>Description: </b> {{ topic.description }}
</p>
</li>
</ng-container>
</ul>

+ 23
- 5
src/app/components/topics/topics.component.ts View File

@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, SimpleChanges } from '@angular/core';
import { Topic } from '../../types/topic';
import { TopicService } from '../../services/topic.service';
import { GlobalVariablesService } from "../../services/global-variables.service";

@Component({
selector: 'app-topics',
@@ -10,17 +11,34 @@ import { TopicService } from '../../services/topic.service';
export class TopicsComponent implements OnInit {

topics;
topicsService;

constructor(private topicService: TopicService,) { }
constructor(public globalVarsService: GlobalVariablesService, private topicService: TopicService,) { }

ngOnInit() {
this.getTopics();
}

ngDoCheck() {
if(this.globalVarsService.topicAdded==true) {
console.log("CHECKED!")
if (this.topicsService) {
this.topicsService.unsubscribe();
}
this.getTopics();
this.globalVarsService.topicAdded=false;
}
}

ngOnDestroy() {
if (this.topicsService) {
this.topicsService.unsubscribe();
}
}

getTopics(): void {
this.topics = this.topicService.getTopics();
this.topics.subscribe((result: any) => {
this.topicsService = this.topicService.getTopics().subscribe((result: any) => {
this.topics = result.data.topics;
})
});
}
}

+ 16
- 0
src/app/services/global-variables.service.spec.ts View File

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { GlobalVariablesService } from './global-variables.service';

describe('GlobalVariablesService', () => {
let service: GlobalVariablesService;

beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(GlobalVariablesService);
});

it('should be created', () => {
expect(service).toBeTruthy();
});
});

+ 11
- 0
src/app/services/global-variables.service.ts View File

@@ -0,0 +1,11 @@
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class GlobalVariablesService {

constructor() { }
topicAdded: boolean = false;

}

+ 10
- 20
src/app/services/topic.service.ts View File

@@ -16,6 +16,7 @@ export class TopicService {
}
}
`
getTopics() {
let topics = this.apollo.watchQuery({query: this.topic_query,}).valueChanges;
return topics;
@@ -23,27 +24,16 @@ export class TopicService {

addTopic(topic: Topic) {

// Das hat leider nicht funktioniert, Fehler: Module not found: can't resolve async_hook

/* const query = {
text: 'INSERT INTO foxbase-todos(title, description) VALUES($1, $2)',
values: [topic.title, topic.description],
let topic_create_query = gql`
mutation {
addTopic(title: "${topic.title}", description: "${topic.description}") {
id
title
description
}
}

const client = new Client({
user: 'lytwqcvcihuxqy',
host: 'ec2-18-203-62-227.eu-west-1.compute.amazonaws.com',
database: 'd22s63k3d4tbq2',
password: '11d405a5e4764ec6a73370eba7274ae76e42c29c4922bc9146411d2d3172db17',
port: 5432,
})

await client.connect()

await client.query(query, (err, res) => {
console.log(err, res)
client.end()
}) */
`
return this.apollo.mutate({mutation: topic_create_query});
}

constructor(private apollo: Apollo) { }


Loading…
Cancel
Save