开发应用程序：React、GraphQL、Spring Data JPA、UCP，Oracle

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

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

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

* 有关可以设置的其他可选 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，例如：

在 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 应用程序并查看预期的相同查询结果

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

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