如何在同一個 React 應用程序中將 redux 和 graphql 與 apollo 客戶端一起使用？

Question

我正在做一個項目，我在react中使用apollo/client，graphql，對於全局狀態管理，我必須使用redux。 我很確定我將不得不在我的項目中處理更多的數據，所以我會把它放在我的商店里。 我想知道如何使用 apollo Client 進行 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的action文件時遇到問題。 它沒有將數據發送到應用程序的其余部分。

    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 意味着您在沒有額外好處的情況下做了兩倍的工作，更糟糕的是，您很有可能在兩層之間引入大量異步。