Reactで、useQuery, useMutation以外で、Apollo Client操作するメモ

概要:

React で、useQuery, useMutation以外で、
hooks使わずにクラス内等でApollo Client使用の例です

---

環境

• Apollo Client : 3.3.20
• React : 17.0.2

---

• select

• GQL : js/graphql/todo.js

todo.js

export const GET_TODOS = gql`
  query {
    todos {
      id
      title
    }
  }
`;

• select処理, client.query使います

Index.js

import client from '../../apollo-client'
import { GET_TODOS } from '../../graphql/todo';

  constructor(props) {
    super(props);
    this.state = {
      count: 0, items: []
    };
  }

  async componentDidMount(){
    const data = await client.query({
    query: GET_TODOS 
    }) 
    console.log(data.data.todos) 
    this.setState({
    items : data.data.todos
    })
  } 

---

• add 更新系の処理, client.mutate で、mutation使います。

• GQL : js/lib/LibTodo.js

LibTodo.js

  get_gql_add : function(title){
    return gql`
      mutation {
        addTodo(title: "${title}" ) {
          id
          title
         }
       }      
   `   
  }, 

js/components/todos_client/Create.js

LibTodo.js

  const clickHandler= async function(){
    var title = document.getElementById('title');
    const result = await client.mutate({
      mutation: LibTodo.get_gql_add(title.value)
     })    
  }

....