如何在同一个react应用程序中与apollo客户端一起使用redux和graphql?

83qze16e  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(234)

我在做一个项目,我在react中使用apollo/client和graphql,对于全局状态管理,我必须使用redux。我很确定我必须在我的项目中处理更多的数据,所以我会把它放在我的存储中。我想知道如何使用apollo客户端进行redux操作以从graphql端点获取数据
第一部分是我的index.js,在这里我设置了apollo客户端。

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的操作文件时遇到问题。它没有向应用程序的其余部分发送数据。

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};```

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题