每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

使用 React 前端在几分钟内开发一个简单的应用程序，该前端对由 Oracle 数据库支持并通过 UCP 访问的 Spring Boot Data JPA 服务进行 GraphQL 调用。

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

因此，我将从应用程序源的链接开始。

使用此处的简单说明构建和运行应该只需要几分钟：

cd spring-data-jpa-graphql-ucp-oracle
修改src/main/resources/application.properties以设置spring.datasource.url、spring.datasource.username和的值spring.datasource.password。
运行mvn clean install。
运行java -jar target/spring-data-jpa-graphql-oracle-0.0.1-SNAPSHOT.jar。
（在单独的终端/控制台中）cd react-graphql
运行yarn add @apollo/client graphql（项目只需要一次）。
运行npm run build。
运行npm start。
浏览器窗口将打开到 http://localhost:3000/。这是一个 React 应用程序，它将使用 Apollo 对运行在 localhost:8080 上的 Spring Boot 服务进行 GraphQL 查询，该服务又使用 JPA 通过从 UCP 获得的连接查询 Oracle 数据库。

有不少文章介绍了 GraphQL 的优点和细节，特别是因为它们非常适合许多微服务架构。我将尝试通过实际的应用程序源来说明这一点，并在此简要说明 GraphQL 查询允许客户端动态指定查询中所需的确切内容（无论是读取还是写入），而服务器使用最适当和有效的手段成为可能。这样做可以减少所需的请求数量并提高性能。

一些从后到前的细节：

1.获取Oracle数据库并配置Spring Boot服务
您要做的第一件事是获取一个 Oracle 数据库并配置 Spring Boot 服务以使用 UCP 连接到它。

任何 Oracle 数据库（本地、容器内、云等）都可以。Simplify Microservices with Converged Oracle Database 研讨会是创建免费 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 源中不存在任何特殊的附加逻辑。Bank

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) 的实现。

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

查询类：
public Iterable<Account> findAllAccounts() { return accountRepository.findAll();}

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

Mutation类：
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.");
}

*注意：“Spring for GraphQL 是 GraphQL Java 团队的 GraphQL Java Spring 项目的继承者”，我们在这里使用它，它“旨在成为所有 Spring、GraphQL 应用程序的基础”。因此，我可能会使用该技术发布此应用程序的新版本/分支（它为 graphqls 功能提供方便的注释等）。然而，这个新功能在 2022 年 5 月才达到 1.0 版，所以我在这里使用原始的、更广泛使用的方法。

4. 试用应用程序
最后，试用该应用程序以查看行为。

Postman 是一个方便且简单的测试工具。我们将使用它来创建一个或多个银行，但使用带有 GQL（图形查询语言 - 一种有意类似于 SQL 的语言）的 GraphQL POST，例如：
使用 gql 的 GraphQL POST

示例应用程序在application.properties文件中有spring.jpa.show-sql: true ，因此可以在日志中看到针对数据库的相关 SQL JPA 问题。在这个createBank案例中，我们看到：
Hibernate: select hibernate_sequence.nextval from dualHibernate: insert into bank (name, routing, id) values (?, ?, ?)

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

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

使用以下 gq 执行 findAllAccounts 查询
这次在 Spring Boot 日志中，我们看到：

Hibernate: select bank0_.id as id1_1_0_, bank0_.name as name2_1_0_, bank0_.routing as routing3_1_0_ from bank bank0_ where bank0_.id=?
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 应用程序时，我们会看到预期的相同查询结果。

运行 React 应用程序并查看预期的相同查询结果

计划在即将发布的版本中提供更多功能和创新。稍后再谈。

如有任何意见或问题，请随时与我联系，感谢您的阅读！