Apollo Client の Query

前回のセクションで以下のQueryをGraphQLのPlaygroundで試しました。

  query TodoListingQuery{
      listing {
        id
        content
      }
  }
                    

ここからはどのようにしてこのqueryをクライアント側でも実行するのかを説明していきます。

最初にサーバー側にcorsを設定します。（corsとは）

   // server/src/index.js  

   const cors = require('cors')
   
   app.use(
       cors({
        origin: 'http://localhost:3000',
        credentials: "true
       })
   )
                    

Apollo Clientを使ったqueryの作成として最も一般的であるのはuseQueryを使った方法です。
とりあえずクライアント側のsrc下にTodoListing.jsという名前のファイルを作成しコードをかいていきます。

//  src/TodoListing.js

  
import React from 'react'
import { gql, useQuery } from '@apollo/client';

const GET_TODOS = gql'
  query GetGreeting{
    listing {
      id
      content
      createdAt
    }
  }
';

function TodoListing() {
    const { loading, error, data } = useQuery(GET_TODOS)
    if(loading){
        return <h1>Loading.....</h1>
    }
    if(error){
        console.log(error)
    }
    console.log(data)
    return (
        <div>
         {data.listing.map(todo => {
             return (
                 <>
                 <p>{todo.id}</p>
                 <p>{todo.content}</p>
                 </>
             )
         })}    
        </div>
    )
}

export default TodoListing   

                    

このセクションではシンプルにApp.jsにインポートし

   //  src/App.js

   import TodoListing from './TodoListing';

   function App() {
     return (
       <div className="App">
         <TodoListing />
       </div>
     );
   }
   
   export default App;        
       
                    

まずGET_TODOSに前回試したようなqueryを定義します。そしてそのGET_TODOSをTodoListingコンポーネントの中のuseQueryに渡します。

useQueryはこの時loading, error, dataをかえします。loadingはリクエストをGraphQLサーバーに送って返答を待っている間trueになります。errorはGraphQLとの通信でエラーが発生したらそのエラーに関する情報が与えられここではconsole.log(error)で確認できるようにしています。最後にdataはGraphQLサーバーから送られてくるデータであり、Playgroundで試したようなデータがかえってきます。初めての方はまずconsole.log(data)で確認してみてください。

前回作ったTodoが表示されていればOKです。