react graphqlでgraphqlの変数を使ってみた

前回作った内容だと

https://masalib.hatenablog.com/entry/2020/11/03/013208

固定の検索結果しかとれないので通常の業務だと使えない。 graphqlサーバーにわたすクエリーを動的にしたかった。 本来だとフォームにある内容を渡すというのがいいだけど、今の段階ではできていない。

mainのjsは青色になっているところは触っていない

/src/App.js

import React from 'react';
import {ApolloProvider} from '@apollo/client';
import client from './client'
import {Issues} from './Issues';
+ import SearchRepositories from './SearchRepositories';

function App() {
  return (
      <>
    <div className="App">
          hello,world
    </div>
    <ApolloProvider client={client}>
      <Issues />

+       <SearchRepositories />

    </ApolloProvider>
    </>    
  );
}

リポジトリの検索部分

実際のsource

/src/SearchRepositories.js

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

// 発行する GraphQL クエリ
const GET_REPOSITORIES = gql`
  query searchRepositories($count: Int,$query: String!){
    search(query: $query, type: REPOSITORY, first: $count) {
      repositoryCount
      edges {
        cursor
        node {
          ... on Repository {
            id
            name
            url
            stargazers {
              totalCount
            }
            viewerHasStarred
          }
        }
      }
      }
  }
`;

const SearchRepositories = () => {
  // GraphQL のクエリを実行
  const {loading, error, data} = useQuery(GET_REPOSITORIES, {variables: { count: 10 ,query:'GraphQL'},}  );

  // クエリ実行中の表示
  if (loading) return <p>Loading ...</p>;

  // エラー発生時（レスポンスがないとき）の表示
  if (error) return <p style={{color: 'red'}}>{error.message}</p>;

  // クエリの結果が返ってきたときの表示
  const {repositoryCount} = data.search;
  const search = data.search

  return (
    <>
        <h2>SearchRepositories: {repositoryCount}</h2>
        {
        search.edges.map(edge => {
            const node = edge.node
            return (
                <li key={node.id}>
                <a href={node.url} target="_blank" rel="noopener noreferrer">{node.name}</a>
                </li>
            )
            })
        }              
    </>
  )
};

export default SearchRepositories

解説

// 発行する GraphQL クエリ
const GET_REPOSITORIES = gql`
  query searchRepositories($count: Int,$query: String!){
    search(query: $query, type: REPOSITORY, first: $count) {

クエリーを設定している部分があるのですが

searchRepositories($count: Int,$query: String!)

graphqlクエリーの内の変数を宣言しています。

// GraphQL のクエリを実行
const {loading, error, data} = useQuery(GET_REPOSITORIES, {variables: { count: 10 ,query:'GraphQL'},}  );

variables: { count: 10 ,query:'GraphQL'},の部分で変数に値をセットしています これで値を変えるとクエリーの結果が変わる事できます

変数の部分は微妙にjsonになっていませんがうまい事、解釈してくれるみたい

書き忘れていたけど

githubのgraphqlにはIDEというかエクスプローラーが用意されている

developer.github.com

ここで試しながらクエリーを作れるのは本当にありがたい。 まだバックエンド部分は作っていないけど、この部分も勉強したい。