开发一个简单的应用程序：React、GraphQL、Spring Data JPA、UCP 和 Oracle

一个现代全栈微服务应用程序的简洁描述和示例，包括一个 React 前端服务，该服务对 Spring Boot Data JPA 后端服务执行 GraphQL 查询，该后端服务又映射到 Oracle 数据库。

1.cd spring-data-jpa-graphql-ucp-oracle
2.修改src/main/resources/application.properties以设置spring.datasource.url、3.spring.datasource.username和的值spring.datasource.password。
4.运行mvn clean install。 
5.运行java -jar target/spring-data-jpa-graphql-oracle-0.0.1-SNAPSHOT.jar。 
6.（在单独的终端/控制台中）cd react-graphql
7.运行yarn add @apollo/client graphql（项目只需要一次）。
8.运行npm run build。 
9.运行npm start

浏览器窗口将打开到 http://localhost:3000/。这是一个 React 应用程序，它将使用 Apollo 对运行在 localhost:8080 上的 Spring Boot 服务进行 GraphQL 查询，该服务又使用 JPA 通过从 UCP 获得的连接查询 Oracle 数据库。

1.获取Oracle数据库并配置Spring Boot服务 

首先获取一个 Oracle 数据库并配置 Spring Boot 服务以使用 UCP 连接到它。任何 Oracle 数据库（本地、容器内、云等）都可以。

Spring Boot 目前默认使用 Hikari 连接池。但是，Oracle 的通用连接池 (UCP) 提供了许多优势，包括性能以及标签、请求边界、应用程序连续性、RAC 故障转移、分片、诊断和监控等特性，未来版本中还会有更多优势。为了使用 UCP 而不是 Hikari，必须设置特定的 DataSource 配置属性并添加适当的依赖项。 

以下是application.properties文件中配置属性的示例片段：

spring.datasource.url=jdbc:oracle:thin:@someServiceName_tp?TNS_ADMIN=/someLocation/Wallet_someWallet
spring.datasource.username=someUser
spring.datasource.password=somePassword
spring.datasource.driver-class-name=oracle.jdbc.OracleDriver
spring.datasource.type=oracle.ucp.jdbc.PoolDataSource
spring.datasource.oracleucp.connection-factory-class-name=oracle.jdbc.replay.OracleDataSourceImpl
spring.datasource.oracleucp.database-name=oracleADBForGraphQL
spring.datasource.oracleucp.data-source-name=oracleADBForGraphQLDataSource
spring.datasource.oracleucp.description="用于 GraphQL 的 Oracle ADB"

* 有关可以设置的其他可选 UCP 属性（包括池和日志记录设置），请参阅 src 存储库。

可以通过几种方式设置 Oracle 驱动程序和 UCP 库依赖项。

例如，可以使用生产 POM，如以下 pom.xml 片段所示：

<dependency>
   <groupId>com.oracle.database.jdbc</groupId>
   <artifactId>ojdbc11-production</artifactId>
   <version>21.1.0.0</version>
   <type>pom</type>
</dependency>

dependency也可以使用单个条目，如以下 pom.xml 片段所示：

<dependency>
   <groupId>com.oracle.database.jdbc</groupId>
   <artifactId>ojdbc11</artifactId>
   <version>21.1.0.0</version>
</dependency>
<dependency>
   <groupId>com.oracle.database.jdbc</groupId>
   <artifactId>ucp</artifactId>
   <version>21.1.0.0</version>
</dependency>
<dependency>
   <groupId>com.oracle.database.ha</groupId>
   <artifactId>ons</artifactId>
   <version>21.1.0.0</version>
</dependency>
<dependency>
   <groupId>com.oracle.database.security</groupId>
   <artifactId>oraclepki</artifactId>
   <version>21.1.0.0</version>
</dependency>
<dependency>
   <groupId>com.oracle.database.security</groupId>
   <artifactId>osdt_core</artifactId>
   <version>21.1.0.0</version>
</dependency>
<dependency>
   <groupId>com.oracle.database.security</groupId>
   <artifactId>osdt_cert</artifactId>
   <version>21.1.0.0</version>
</dependency>

2. Spring Boot Data JPA 基础知识

接下来，请注意 Spring Boot Data JPA 的基础没有改变。

请注意，就模型和存储库抽象（在本例中 为Account和）而言，UCP 或 GraphQL 逻辑的 Spring Data JPA 源中不存在任何特殊的附加逻辑。

3. Spring Boot Serverside GraphQL 基础知识

然后，注意 Spring Boot 中服务器端 GraphQL 的基础知识。GraphQL 包括模式、查询和突变的概念。模式描述了哪些数据可供查询和操作。例如，在src/main/resources/graphql/account.graphqls 中，可以看到：

type Account {
   id: ID!
   balance: BigDecimal!
   description: String
   bank: Bank
}

在account.graphqls 中，我们看到：

extend type Query {
   findAllAccounts: [Account]!
   countAccounts: Long!
}

可以创建、删除和更新的信息。同样，在account.graphqls中，我们看到：

extend type Mutation {
   createAccount(balance: BigDecimal!, description: String, bank: ID!): Account!
   updateAccount(id: ID!, balance: BigDecimal, description: String): Account!
   deleteAccount(id: ID!): Boolean
}

GraphQL 和 Spring Data JPA 之间映射的逻辑位于解析器包中，其中包含GraphQLQueryResolver (Query)、GraphQLResolver<Account> (AccountResolver)和 GraphQLMutationResolver (Mutation) 的实现。 

所有这些都是直接和直接的调解。以下是一些源代码片段来举例说明：

• Query.class：

public Iterable<Account> findAllAccounts() {
   return accountRepository.findAll();
}

• AccountResolver.class：

public Bank getBank(Account account) {
   return bankRepository.findById(account.getBank().getId()).orElseThrow(null);
}

• Mutation.class：

public Account updateAccount(Long id, BigDecimal balance, String description) throws Exception {
   Optional<Account> optionalAccount = accountRepository.findById(id);
   if (optionalAccount.isPresent()) {
      Account account = optionalAccount.get();
      if (balance != null)
         account.setBalance(balance);
      if (description != null)
         account.setDescription(description);
      accountRepository.save(account);
      return account;
   }
   throw new Exception("No account found to update.");
}

4. 试用应用程序

 示例应用程序在application.properties文件中有spring.jpa.show-sql: true ，因此可以在日志中看到针对数据库的相关 SQL JPA 问题。在这个createBank案例中，我们看到：

Hibernate: select hibernate_sequence.nextval from dual
Hibernate: insert into bank (name, routing, id) values (?, ?, ?)

然后我们继续为创建的bank(s)/ bankid(s) 创建一个帐户：

 findAllAccounts最后，我们使用以下 GQL进行查询：

5. 前端 React 客户端

现在让我们看看前端 React 客户端及其使用 Apollo 对 Spring Boot 服务进行 GraphQL 查询。

Apollo 是最流行的用于在 ReactJS 中执行 GraphQL 的库，可以通过运行以下命令进行安装：

yarn add @apollo/client graphql

在 index.tsx 中，我们看到创建了一个指向 Spring Boot Data JPA 服务的客户端，以及呈现回复的代码：

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

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

此外，在 App.tsx 中，我们看到之前在 Postman 中为findAllAccounts查询发布的相同 PQL：

const ACCOUNT_INFORMATION_QUERY = gql`
  {findAllAccounts {
      id
      balance
      description
      bank {
          id
          name
      }
  }}
`;

function AccountInformation() {
    const {loading, error, data} = useQuery(ACCOUNT_INFORMATION_QUERY);
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
    return data.findAllAccounts.map( (account:any) =>
        <div key={account.id}>
            bank id: {account.bank.id} , bank name: {account.bank.name} , account id: {account.id}, account description: {account.description}, account balance: {account.balance}
        </div>
    );
}

function App() {
    return (
        <div>
            <h2>Bank Account(s) Information...</h2>
            <AccountInformation/>
        </div>
    );
}

最后，当我们运行 React 应用程序时，我们会看到预期的相同查询结果。