Authentication.

[ghost]

Can you introduce authentication mechanism?

[developer239]

I wanted to do it this weekend but I have lot of work to do. I should be able to implement the auth until the end of December. :)

[ghost]

I'm trying without Redux, but I'm stucked here: https://stackoverflow.com/questions/47655399/react-apollo-2-graphql-authentication-how-to-re-render-component-after-login

[developer239]

@johnunclesam I will post an answer in like 30 minutes. Gotta get that 100 :D

[ghost]

I hope!

[developer239]

@johnunclesam I just posted my answer. I hope it helps. :) I really need to add the authentication here to because it is quite hard to make it the right way and most of the projects need it.

[ghost]

I read you answer.

Do you think there is no way to work without App state? Just with Apollo 2?
I don't believe I can't use the power of Apollo!

Also I read online that many people are turning off Redux with Apollo 2. But I don't understand how! This problem is a basic one. Doesn't it?

Can you show me an example WITH Redux?

[developer239]

It is perfectly to fine use redux. Redux is a fancy state management I believe that you want to store client side data in redux and server side data on Apollo server. People are turning off redux because Apollo 2 does not have redux reducer anymore. Using the redux is perfectly fine though.

[developer239]

@johnunclesam Nice collaboration. I just edited the answer now the code should be correct.

[ghost]

@developer239 No. It still doesn't work. And plus I think it's not the right direction unfortunately.

[ghost]

https://codesandbox.io/s/0y3jl8znw

It's a lot better, but maybe instaed of check the component state currentUser I can use the power of Apollo and try with something like: client.query({query: CURRENT_USER_QUERY}) because if are in cache I see that data, if not it make a network request and I can also handle the error "unauthorized" if I don't want check also the localStorage token. I need this also for example if I need the currentUser info in other components. I don't like the component state for this. Maybe the App one (or maybe Redux), but what I wanna say to you is that I already have the Apollo Cache with data!!!!

[developer239]

You are making things too complicated for no reason. What exactly happens when you call graphql query? Cache first? Cache only? Network first?

I get your point but I don't think that using cache instead of react / redux state is a good practice. I might be wrong though. However cache should make fetching values from API faster. You shouldn't rely on values in the cache.

React / Redux state and Apollo cache are two different things.

apollographql/apollo-client#98

[ghost]

You are making things too complicated for no reason. What exactly happens when you call graphql query? Cache first? Cache only? Network first?

Its always cahe-first but I can choose my own fetchPolicy in options.

I think Apollo 2 with inMemoryCache intent is to not use anymore Redux.

I get your point for using Redux. Ok. I wanna try. I know Redux enough. Can I ask you how to query from Redux reducers?

So I can use it like this:

• dispatch(CURRENT_USER_FETCHING_IN)
• Apollo.query(CURRENT_USER_QUERY or whatever)
• dispacth(OK-CURRENT_USER_INFO_IN_APOLLO)

But how?

Is this whay do you mean?

[ghost]

I get your point: CLIENT state for the entire App is necessary. I get your point. You are simply RIGHT.

So now the question: HOW? How can I query my Apollo cache with Redux dispatch and also use graphql() or maybe just Redux in my components?

In your files in master I can't find this. Am I wrong?

[ghost]

Maybe something here? apollographql/apollo-client#2273

[developer239]

Well the confusing thing is that I dont use redux with apollo client because I don't really need to do that in this repository. I use redux only for the counter module.

I believe I will use redux for storing user information when I implement the authorization.

I am quite confused right now to be honest because you are not the first person who told me that they don't need to use redux with apollo client 2. I will definitely try to find out what are the options.

In your case you don't need redux because your application is really small. You can just store the shared information in App component's state.

This is also a great issue in official apollo client repo:
apollographql/apollo-client#2509

I will definitely take a look at this thing if I am going to work with authorization in the future:
https://github.com/rportugal/apollo-cache-redux

[developer239]

@johnunclesam I mean these are the things that make people confused. He has 14 thumbs down.

[ghost]

Are you adding confusion on confusion?! :):):):):):)

Can you imagine a way to what I asked? My app is big or not I wanna use Redux in parallel with Apollo. And I wanna fetch data in Apollo with queries through Redux reducers... They don't have to be connected. Is it clear now?

[ghost]

Or maybe we can fix it with writeQuery and readQuery but we still need Query presence in cache as them present in backend. This is the problem.

[developer239]

@johnunclesam They don't have to be connected. that is the thing that is NOT correct. If you want to track if user is logged in or not in you application you have to store that value in react / redux state. Local storage is fine but react does not know when it changes. Look at this hack for example:

https://codesandbox.io/s/0y3jl8znw

        <button
          onClick={() => {
            localStorage.clear();
            this.forceUpdate();
          }}
        >
          localStorage clear()
        </button>

I had to call the this.forceUpdate(); because if I didn't the Menu component would not re-render and it would still think that user is logged in.

You have to differentiate between values that are important for client and server and their differences.

We can for example fetch user data from server every time we need them.

However we have to know if user is logged in client (react / redux state).

[ghost]

I can use the localstorage for authorization header. But now we are talking about many problems. Can we fix one by one:

1. I wanna use Redux like with a plain old react/redux app with rest api and axios for fetch data... You know? Instead of using axios or es6 fetch I can just use Apollo queries. So my Apollo cache is fetching and my component state are governed by Redux. The data is in the Apollo Cache and I use redux to manage my states.

[ghost]

Like your counter example. I can use redux for states and client data and Apollo for caching backend data. Just I don't know how to start fetching Apollo with redux reducer. Is there a way? Redux-thunk?

[ghost]

Any maybe something like "connect" HOC with "graphql" HOC.

[developer239]

@johnunclesam Dude, I spent about 2 hours helping you with your application and you gave the reward to someone else. 😄