Skip to content
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

Merged
merged 7 commits into from Jan 21, 2021
Merged

Conversation

mddilley
Copy link
Contributor

@mddilley mddilley commented Jan 14, 2021

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 in atd-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

Screen Shot 2021-01-19 at 11 17 31 AM

@mddilley mddilley added the WIP Work in progress label Jan 14, 2021
Copy link
Contributor

@sergiogcx sergiogcx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for completing the Apollo mission!

Comment on lines +26 to +48
// 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(),
});
Copy link
Contributor

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! 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

Copy link
Contributor

@mateoclarke mateoclarke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢

@mddilley mddilley merged commit e214e9f into main Jan 21, 2021
@mddilley mddilley deleted the 4947_update_apollo branch January 21, 2021 16:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
WIP Work in progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

User Management | Replace "Login" in side drawer with "Log out"
3 participants