이전 글에서구축했던 GraphQL 서버와 React & Electron Project와 연동하는 방법을 정리해 보았습니다.

React & Electron 프로젝트 생성

Electron-Typescript-React-Webpack-Boilerplate을사용하여 React & Electron 프로젝트를 생성합니다.
설정 방법은 README.md 파일을 참고합니다.

React & Electron 프로젝트에 Apollo GraphQL Client 추가 및 설정

아래의 패키지를 설치합니다.

npm install @apollo/client apollo graphql

package.json의 scripts에 아래를 추가합니다.

"apollo:codegen": "apollo client:codegen src/types --target=typescript --outputFlat",

apollo.config.js를 프로젝트 최상위 폴더에 생성합니다.

apollo.config.js :

module.exports = {
  client: {
    service: {
      name: 'My GraphQL Server',
      url: 'http://localhost:8080/graphql',
      // Optional disable SSL validation check
      skipSSLValidation: true,
    },
    includes: ['./src/**/*.tsx', './src/**/*.ts'],
    tagName: 'gql',
  },
};

GraphQL에서 데이터 가져오기

src/renderer/renderer.tsx를 아래와 같이 작성합니다.

src/renderer/renderer.tsx :

import { ApolloClient, ApolloProvider, gql, InMemoryCache, useQuery } from '@apollo/client';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const client = new ApolloClient({
  uri: 'http://localhost:8080/graphql',
  cache: new InMemoryCache(),
});

const GET_ALL_PERSON = gql`
  query GetAllPerson {
    getAllPerson {
      id
      name
      number
      email
    }
  }
`;

ReactDOM.render(
  <ApolloProvider client={client}>
    <div className="app"></div>
  </ApolloProvider>,
  document.getElementById('root')
);

프로젝트에서 사용되는 Query, Mutation의 Type를 생성합니다.
npm run apollo:codegen를 실행하면, src 폴더 안에 gql로 명시한 구문에서 사용한 Type를 src/types에 생성합니다.

src/renderer/renderer.tsx :

import { ApolloClient, ApolloProvider, gql, InMemoryCache, useQuery } from '@apollo/client';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GetAllPerson, GetAllPerson_getAllPerson } from '_/types/GetAllPerson';

const client = new ApolloClient({
  uri: 'http://localhost:8080/graphql',
  cache: new InMemoryCache(),
});

const GET_ALL_PERSON = gql`
  query GetAllPerson {
    getAllPerson {
      id
      name
      number
      email
    }
  }
`;

function AllPersonTable() {
  const { loading, error, data } = useQuery<GetAllPerson>(GET_ALL_PERSON);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Number</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {data?.getAllPerson?.map((person: GetAllPerson_getAllPerson) => (
          <tr key={person.id}>
            <td>{person.name}</td>
            <td>{person.number}</td>
            <td>{person.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

ReactDOM.render(
  <ApolloProvider client={client}>
    <div className="app">
      <AllPersonTable />
    </div>
  </ApolloProvider>,
  document.getElementById('root')
);

npm run dev를 실행하면, 아래와 같이 정상적으로 데이터를 가져오는 것을 확인할 수 있습니다.