GraphQL

與 RESTful、GRPC類似，均為 http 上層的後端與前端溝通方式

Server 用法

const typeDefs = gql`
  """
  使用者
  """
  type User {
    "識別碼"
    id: ID
    "名字"
    name: String
    "年齡"
    age: Int
    "朋友"
    friends(a: Int): [User]
  }

  type Query {
    hello: String
    "取得當下使用者"
    me: User
    "取得所有使用者"
    users: [User]
  }

  type Mutation {
    "新增使用者"
    addUser(id: ID, name: String!, age: Int): User
  }
`;

const resolvers = {
  Query: {
    hello: () => "world",
    me: () => users[0],
    users: () => users,
  },
  Mutation: {
    addUser: (root, args, context) => {
      const { id, name, age } = args;
      // 新增 post
      users.push({
        id,
        name,
        age,
      });
      return users[3];
    },
  },
  User: {
    friends: (parent, args, context) => {
      const { friendIds } = parent;
      return users.filter((user) => friendIds.includes(user.id));
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {a: ""}
  }
});

typeDefs 用來定義 type，內建有 query, mutation, subscribe 三種 type。

resolvers 用來處理當接收到 query 或 mutation 或 subscribe 時要做的對應處理，resolvers 包含三個預設參數 (parent, args, context)

context 讓 server 可以傳遞訊息讓 resolvers 第三個參數接收

Query

  query user{
    user {
      id
      name
      age
    }
  }
  
  等同於
  
    user {
      id
      name
      age
    }

React 範例：

記得要寫在 ApolloProvider 裡面的 component 內，如果直接在 ApolloProvider 同個 component 使用 useQuery 會無法

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

const getUsersQuery = gql`
  {
    users {
      id
      name
      age
    }
  }
`;

const Users = () => {
  const { loading, error, data } = useQuery(getUsersQuery);
  return <div>{data && data.users[0].name}</div>;
};

export default Users;

Get started with Apollo ClientApollo GraphQL Docs

Fragment

把 client 寫 query 時的結構拆出來，讓他可以重複使用

const getUsersQuery = gql`
  {
    users {
      id
      name
      age
    }
  }
`;


// 等同於

const getUsersQuery = gql`
  {
    users {
      ...userInfo
      age
    }
  }
  fragment userInfo on User {
    id
    name
  }
`;

Mutation

Mutations in Apollo ClientApollo GraphQL Docs

example:

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

const getUsersQuery = gql`
  {
    users {
      id
      name
      age
    }
  }
`;

// $ 為變數用法，useMutation 可在 option 傳入 variable
const mutationUsers = gql`
  mutation AddUser($id: ID!) {
    addUser(id: $id, name: "test", age: 15) {
      id
      name
      age
    }
  }
`;

const Users = () => {
  const { loading, error, data, refetch } = useQuery(getUsersQuery);
  const [addUser, { data: _data }] = useMutation(mutationUsers, {
    variables: {
      id: (Math.floor(Math.random() * 100)).toString(),
    },
  });
  
  const handleAddUser = () => {
    addUser();
    refetch(); // 再 query 一次新資料
  };
  return (
    <div>
      <button onClick={handleAddUser}>Add</button>
      {data && data.users.map((user, idx) => <div key={idx}>{user.name}</div>)}
    </div>
  );
};
export default Users;