我正在做一个项目,我在react中使用apollo/client,graphql,而对于全局状态管理,我必须使用redux。我很确定我必须在我的项目中处理更多数据,所以我会把它放在我的商店里。
我想知道如何使用 apollo 客户端进行 redux 操作以从 graphql 端点获取数据
第一部分是我的 index.js,我在其中设置了 apollo 客户端。
import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';
import {BrowserRouter} from "react-router-dom";
import store from "./store";
import { Provider } from "react-redux";
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import {InMemoryCache} from "@apollo/client";
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache()
});
ReactDOM.render(
<React.StrictMode>
<ApolloProvider client={client}>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</ApolloProvider>
</React.StrictMode>,
document.getElementById("root")
);
我在完成 redux 的操作文件时遇到问题。它没有向应用程序的其余部分发送数据。
import {
FETCH_PRODUCTS,
FETCH_PRODUCTS_FAIL,
FETCH_PRODUCTS_SUCCESS } from "../types";
import {gql} from "apollo-boost";
const getProductsQuery = gql`
{
category{
products{
name
inStock
gallery
category
prices{
currency
amount
}
}
}
}
`
const fetchProducts = () => async(dispatch) =>{
dispatch({
type: FETCH_PRODUCTS,
});
try{
//how can I get data from GRAPHQL by using apollo client
dispatch({
type:FETCH_PRODUCTS_SUCCESS,
payload:data,
});
}
catch(error){
dispatch({
type: FETCH_PRODUCTS_FAIL,
payload:error.message
});
}
}
// export default graphql(getProductsQuery);
export {fetchProducts};
最佳答案
当您使用 Apollo 时,您真的不应该将这些数据放入 Redux。您仍然可以将 Redux 用于其他东西,但 apollo 的工作是保存这些数据并使其在您的组件中可用。将其取出并放入 Redux 意味着您将工作加倍而没有额外的好处,更糟糕的是,您很有可能在两层之间引入大量异步。
关于javascript - 如何在同一个 react 应用程序中将 redux 和 graphql 与 apollo 客户端一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68348307/