🐷

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

1 min read

概要:

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)
     })    
  }

....

Discussion

ログインするとコメントできます