💬
Svelte + GraphQL(apollo) で、CRUDを作る
概要:
前の svelte-apollo導入の続編となり。GraphQL操作的な内容となります
- apollo serverは、前のmongoDB版に接続する例です
環境
- svelte: 3.0.0
- @apollo/client 3.3.20
- apollo server
- svelte-apollo 0.4.0
参考のコード
GraphQL
/src/graphql/task.js
- create
task.js
get_gql_add : function(title){
return gql`
mutation {
addTask( title: "${title}") {
id
title
}
}
`
},
- index
task.js
GET_TASKS: function(){
return gql`
query {
tasks {
id
title
}
}
`
},
svelte
- create
pages/tasks/create.svelte
create.svelte
setClient(client);
async function handleClick() {
// alert('clicked')
await add_item()
}
async function add_item(){
try {
var elemTitle = document.getElementById('title');
const result = await client.mutate({
mutation: QGL_TASK.get_gql_add(elemTitle.value)
})
console.log(result)
window.location.href = '/#/tasks/'
} catch (error) {
console.error(error);
}
}
</script>
<!-- -->
<div class="container">
<h3>Tasks - Create</h3>
<hr />
<div class="form-group">
<label>Title:
<input type="text" class="form-control" name="title" id="title" />
</label>
</div>
<hr />
<button on:click={handleClick} class="btn btn-primary">Add</button>
</div>
- index
pages/tasks/index.svelte
index.svelte
export let items = []
setClient(client);
const get_items = async function (){
const data = await client.query({
query: GQL_TASK.GET_TASKS(), fetchPolicy: "network-only"
})
console.log(data.data.tasks)
items = data.data.tasks
}
get_items()
</script>
<!-- -->
<div class="container">
<h3>Tasks - index</h3>
<a href="/tasks/create" use:link class="btn btn-primary">Create
</a>
<hr />
{#each items as item}
<h3><a href={`/tasks/show/${item.id}`} use:link>{item.title}</a>
</h3>
<p>ID : {item.id}
<a href={`/tasks/edit/${item.id}`} use:link class="ml-2 btn btn-outline-primary">
Edit</a>
</p>
<hr />
{/each}
</div>
参考のページ
- Apollo server + express + mongoDB で、GraphQL操作する
....
Discussion