要部署一个Apollo和React全栈应用,可以按照以下步骤进行:
npm install apollo-server graphql
然后,在项目中创建一个Apollo服务器文件(例如server.js
)。在文件中,引入所需的模块并定义GraphQL schema和resolvers。以下是一个示例:
const { ApolloServer, gql } = require('apollo-server');
// 定义GraphQL schema
const typeDefs = gql`
type Query {
hello: String
}
`;
// 定义resolvers
const resolvers = {
Query: {
hello: () => 'Hello, Apollo and React!',
},
};
// 创建Apollo服务器
const server = new ApolloServer({ typeDefs, resolvers });
// 启动服务器
server.listen().then(({ url }) => {
console.log(`Apollo server running at ${url}`);
});
npx create-react-app my-app
然后,进入新创建的应用目录:
cd my-app
npm install @apollo/client graphql
然后,在React应用中创建一个Apollo Client配置文件(例如src/apollo.js
)。在文件中,引入所需的模块并创建Apollo Client实例。以下是一个示例:
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000',
cache: new InMemoryCache(),
});
export default client;
import React from 'react';
import { gql, useQuery } from '@apollo/client';
const GET_HELLO = gql`
query {
hello
}
`;
function Hello() {
const { loading, error, data } = useQuery(GET_HELLO);
if (loading) return Loading...
;
if (error) return Error :(
;
return {data.hello}
;
}
export default Hello;
npm start
这将在本地开发服务器上启动React应用。然后,在浏览器中访问http://localhost:3000
,你将看到显示来自Apollo服务器的数据的React组件。
这就是部署一个Apollo和React全栈应用的基本步骤和示例代码。可以根据自己的需求和项目的复杂性进行相应的调整和扩展。
上一篇:部署一个Angular应用程序