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

Question

我正在做一个项目，我在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};

Answer 1

当您使用 Apollo 时，您确实不应该获取该数据并将其放入 Redux 中。您仍然可以将 Redux 用于其他用途，但 apollo 的工作是保存该数据并使其在您的组件中可用。将其取出并放入 Redux 意味着您要做双倍的工作而没有任何额外好处，更糟糕的是您很可能在两层之间引入大量异步性。