-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
State management | Migrate to Apollo Client 3.0 #183
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// https://www.apollographql.com/docs/react/networking/authentication/#header | ||
const httpLink = createHttpLink({ uri: HASURA_ENDPOINT }); | ||
|
||
const authLink = setContext((_, { headers }) => { | ||
// Get the authentication token and role from user if it exists | ||
const token = getJwt(user); | ||
const role = getHighestRole(user); | ||
|
||
// Return the headers and role to the context so httpLink can read them | ||
return { | ||
headers: { | ||
...headers, | ||
authorization: token ? `Bearer ${token}` : "", | ||
"x-hasura-role": role ? role : "", | ||
}, | ||
}; | ||
}); | ||
|
||
const client = new ApolloClient({ | ||
// Join authLink and httpLink to handle auth in each request | ||
link: authLink.concat(httpLink), | ||
cache: new InMemoryCache(), | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for explaining how Apollo Links work! 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚢
Closes cityofaustin/atd-data-tech#4758
This PR updates Apollo Client and all of the imports throughout the app. I left
apollo-boost
as a dependency since it is required by the GraphQL abstract inatd-kickstand
. I also updated the way that the request headers and user role are appended to requests by following this Apollo snippet. I tested multiple roles and checked the request headers for the JWT and role for Hasura, and it works well.I also am unable to replicate the caching bug from cityofaustin/atd-data-tech#4788 in this branch so I removed the notes about the bug and set
cache-first
fetch policies in both Project and Staff GridTable configs.Request headers from the React app