💬

Svelte + GraphQL(apollo) で、CRUDを作る

2021/07/04に公開

概要:

前の svelte-apollo導入の続編となり。GraphQL操作的な内容となります

  • apollo serverは、前のmongoDB版に接続する例です

環境

  • svelte: 3.0.0
  • @apollo/client 3.3.20
  • apollo server
  • svelte-apollo 0.4.0

参考のコード

https://github.com/kuc-arc-f/svelte2_5apollo


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操作する

https://zenn.dev/knaka0209/books/befdda3d27a264/viewer/27a8cb

....

Discussion