How can I use redux and graphql with apollo client in the same react app?

Question

I'm working on a project, and I'm using apollo/client, graphql in react, and for the global state management, I have to use redux. I'm quite sure I'll have to handle more data in my project so I'll put it in my store. I'm wondering about how can I make redux actions to get data from graphql endpoint using apollo Client

the first part is my index.js where I set up the apollo client.


    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")
    );

I have a problem with completing the action file of redux. it didn't send data to the rest of the app.


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

score 11 · Accepted Answer · answered Jul 12 '21 at 15:30

11

When you are using Apollo, you really should not be taking that data and put it into Redux. You can still use Redux for other stuff, but the job of apollo is to hold that data and make it available in your components. Taking it out and putting it into Redux means you do double the work for no additional benefit, what's even worse there is a good chance you introduce lots of asynchronity between the two layers.

answered Jul 12 '21 at 15:30

phry

35,762
5
67
81

thanks for replying, but I need the data I have got by apollo to be used in redux action!! I can't really understand what I have to do .. how can I do it ?? – Sara Ghali Jul 12 '21 at 16:04
1

You have that data available in your component when using the apollo hooks. Of course you can then send it to redux, but you really should reconsider that. For every type of request to the server, you should be using apollo, and the data is already accessible throughout your application by using apollo. That data should usually never touch redux. – phry Jul 12 '21 at 20:28
@phry could you recommend some solution/s if we want a solid state management solution that works well with graphql? I really like the caching that comes out of the box with Apollo but also would like to have someting like Redux. – ZenVentzi May 26 '22 at 09:07
3

@ZenVentzi You can use RTK Query, but you could really also just use Apollo for server state and Redux for client state. Both perfectly valid. Just don't sync them. – phry May 26 '22 at 15:14
@phry is this means that Apollo client actually caches the request/responses, as far as I see yes, but can you please confirm? I am a bit concern about performance if I trigger the same request a couple of times during lifespan of app /client is in the page browsing/ – Gesha May 28 '23 at 09:18
@Gesha yes. Apollo Client is a cache. Unless you set fetchPolicies that will trigger refetches, it will use the cache if you trigger the same query from multiple components. – phry May 28 '23 at 12:25

How can I use redux and graphql with apollo client in the same react app?

1 Answers1

Linked