我试着学习在GraphCMS中使用ApolloClient3.0

2 年 ago

新, 韵

2 minutes

项目结果

以下是中文的翻译：
这实际上只是一个摄影作品集（以相机的意义来说）
https://cranky-swirles-e2bc61.netlify.app/
https://github.com/tkeshiino21/each-life

太长不看

一些前端工程师可能会发现，对于初学者来说，使用ApolloClient去了解graphCMS可能会有不错的效果。

GraphCMS是什么？

這是一個像 Contentful 一樣的東西。它被稱為 HeadlessContentsManagementSystem，可以想像成一個沒有視圖的類似 WordPress 的東西。它具有部落格發佈功能等等。關於 GraphCMS，從名字就能猜測到它是一個專注於 GraphQL 的 CMS。如果你想試試 GraphQL 或者 Apollo，這個適合你！這次我們介紹一下。

GraphCMS有什么特别之处？

想用GraphQL来开发一个服务时，对于前端工程师来说，突然使用Apollo Server或者Hasura可能有点难。坦白说，我曾经遇到了挫折。
所以，为了暂时先试试手，我尝试使用GraphCMS，并且效果还不错。感觉通过仅仅使用GUI，后端就已经完成了。

另外，关于GraphQL和Apollo的优点，下面的文章非常好，希望你一定要看。
我想向众前端工程师宣传Apollo Client。

我第一次尝试GraphCMS

登录并进行快速启动。
使用BlogStarter等预先安装的模板会更顺利。

↓ 大致就是这个样子。

连接到React

这次我试试用β版的3.0。

import React from 'react';
import ReactDOM from 'react-dom';
import {
  ApolloProvider,
  ApolloClient,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';
import App from './App';

const GRAPHCMS_API =
  'https://api-ap-northeast-1.graphcms.com/v2/YOUR_API_KEY/master';

const client = new ApolloClient({
  link: new HttpLink({ uri: GRAPHCMS_API }),
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

如果在ApolloDevTools上，右侧显示了任何类型的查询结果，则表示成功连接到React。

写一个查询。

一旦到这一步，只需要在之前的APIplayground中复制并粘贴已成功的响应代码，放入gql标签中即可。看起来是这样的。

import { gql } from '@apollo/client';

export const GET_PHOTOS = gql`
  query GetPhotos {
    photos {
      id
      image {
        id
        url
      }
      caption
      updatedAt
    }
  }
`;

使用Apollo的Hooks

只需要调用API。
我参考了Apollo的官方文档。
虽然使用HOC也可以，但是我推荐使用像下面这样的Hooks，更加简洁。


import React, { FC } from 'react';
import { GET_PHOTOS } from './graphql/queries'
import { Loader } from '../atoms'

const Photos: FC = () => {
  const { loading, error, data } = useQuery(GET_PHOTOS);

  if (loading) return <Loader />;
  if (error) return <p>err</p>;

  return (
    ...省略...
  );
};

export default Photos;

嘿，很简单！

把”おまけ”用中文原生语言改写，只需要一个选项：

赠品

有一个非常棒的库叫做graph-codegen，它可以根据GraphQL的Schema自动生成TypeScript的类型。
请观看下面中西先生的视频来了解如何使用。

使用Apollo和TypeScript开发类型安全的前端

如果是ApolloClient 3.0版本，codegen.yml文件可能如下所示。（如果有差异，请谅解，因为这是根据我的理解完成的）

overwrite: true
schema: 'https://api-ap-northeast-1.graphcms.com/v2/YOUR_API/master'
documents: 'src/gql/**.ts'
generates:
  src/generated/graphql.tsx:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
    config:
      reactApolloVersion: 3
      withHooks: true
      withHOC: false
      withComponent: false
      gqlImport: '@apollo/client#gql'
      apolloReactCommonImportFrom: '@apollo/client'
      apolloReactComponentsImportFrom: '@apollo/client'
      apolloReactHocImportFrom: '@apollo/client'
      apolloReactHooksImportFrom: '@apollo/client'
  ./graphql.schema.json:
    plugins:
      - 'introspection'

顺便提一下，如果使用这个，之前的代码将变成如下所示。


import React, { FC } from 'react';
import { useGetPhotosQuery } from '../../generated/graphql';

const Photos: FC = () => {
   const { loading, error, data } = useGetPhotosQuery();

  if (loading) return <Loader />;
  if (error) return <p>err</p>;

  return (
    ...省略...
  );
};

export default Photos;

哇哦，超级简单！因为它有类型，所以可以自动补全，而且如果写出奇怪的代码，它会立即批评你，方便到脱发的程度。

总结

以上是关于graphCMS和Apollo的介绍。
如果还结合使用graphql-codegen，将能够获得最佳的开发体验，敬请试用。

感谢您最后一直阅读到底！