Comments (8)
Thanks for reporting. I will take a look. It can be tough.
from react-hooks-global-state.
@Slessi I tried to make a failing test in #34, but it doesn't fail. Any insight? Is it easy for you to reproduce the problem?
from react-hooks-global-state.
I think I get it now. 8565e67
You are likely to getGlobalState
in callback or where you update the value.
Yeah, there's a delay. In that sense, v0.17 has a breaking change.
Would you tell me your use case? I'd like to see if/how we can solve or mitigate it.
from react-hooks-global-state.
@dai-shi has been trimmed down a bit, but basically:
useGlobalState
updates due to a changeAppLayout
is loadeduseQuery
hook runs but the client still has old value in state- API Error
const authMiddleware = new ApolloLink((operation, forward) => {
// This sets the headers for my API queries
operation.setContext({
headers: getAuthHeaders(getGlobalState('authUser')),
});
if (!forward) {
return null;
}
return forward(operation);
});
// This is the client used by queries, with headers
const client = new ApolloClient({ link: ApolloLink.from([ authMiddleware ]) });
const LayoutSwitcher = () => {
const [authUser] = useGlobalState('authUser');
// This decides what view to render based on if im authenticated or not
return authUser !== null ? <AppLayout /> : <AuthLayout />;
};
const AppLayout = () => {
// This uses apollo client, and query requires the authentication it provides
// However, I am thrown 401 Unauthorized by API (in 0.17 only)
const { data } = useQuery(gql`some query`);
return <div>stuff</div>;
};
from react-hooks-global-state.
Thanks! I totally understand how this is happening. Please give me some time for this. This is tricky...
from react-hooks-global-state.
@Slessi So, here's bad news for your use case.
First of all, it's all fine with React Sync Mode and v0.16.
v0.17 is for React Concurrent Mode. #31
state branching is a behavior in CM, where React renders a component tree concurrently.
With state branching, the state value will not be fixed until React committed it.
Now, I can only think of two options (apart from using v0.16) for your use case.
- render AppLayout after the state value is committed.
- do not use state value for authMiddleware. (use a variable outside React as
client
is so.)
The first option doesn't sound nice, because it's against CM and the code will be hacky.
The second option is regrettable, because it means this lib can't help such use cases.
I wonder how Apollo Client will deal with CM, but I don't think it will accept apollo link config from state. So, it's probably the right way to store auth information outside React. Not sure, will see.
I will keep think about any workaround to bridge this gap.
It might be interesting to have a function that returns a promise which resolves the committed value. (But, it doesn't work nicely for your use case. It's like option 1 unessl useQuery
supports CM.)
Hope it explains to some extent. Questions are welcome.
from react-hooks-global-state.
With #35, the new release is v1.0.0-alpha.1.
This version allows to opt-in CM support,
so if you use it normally, it should work like v0.16.0.
Note the new version includes a BREAKING CHANGE and there is no GlobalStateProvider.
@Slessi Hope it works with your use case.
from react-hooks-global-state.
#34 reopened.
from react-hooks-global-state.
Related Issues (20)
- getGlobalState should not be used in render HOT 5
- Error calling createStore (Typescript 3.6.4) HOT 2
- Question: how do developers use this library? HOT 1
- Please add CHANGELOG for 0.17.0 HOT 1
- How to use Redux Devtools Extension HOT 3
- comparison to react-tracked and initial values for a state HOT 9
- Error: You cannot use <GlobalStateProvider> more than once. HOT 5
- How to separate reducer and Action Type then call it to combineReducers (Ex: 07_middleware) HOT 3
- Offline saved data for React Native HOT 11
- Be able to access multiple state keys with a single hook HOT 3
- Mocking useGlobalState with jest? HOT 8
- Restoring initial state from localStorage, if any? HOT 10
- global state not preserved with Fast Refresh HOT 2
- Argument of type '"cart"' is not assignable to parameter of type 'never' HOT 5
- Asynchronous initial state HOT 4
- Is it possible to change a value outside a component? HOT 2
- Persistence with createGlobalState HOT 6
- How to easily reset state? HOT 1
- How to update the state in Bulk ? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hooks-global-state.