Hello. I made an app using graphQL apollo client. It works well.
But the app is still using the window.localStorage to set the auth header.
When I decide to change it with Ionic Storage, I met the wall.
The apollo’s middleware config is on the outside of the app module.
How can I inject the Ionic storage instance into the apollo’s middleware config?
I know this is not about ionic. It’s my lack of understanding in angular.
But I would like to ask you. Thanks.
app.module.ts
...
import { IonicStorageModule } from '@ionic/storage';
import { ApolloModule } from 'apollo-angular';
import { provideApolloClient } from './apollo-client';
@NgModule({
imports: [
...,
ApolloModule.forRoot(provideApolloClient),
IonicStorageModule.forRoot()
],
...
})
export class AppModule {}
apollo-client.ts
import { ApolloClient, createNetworkInterface } from 'apollo-client';
const networkInterface = createNetworkInterface({ uri: '...' });
networkInterface.use([{
applyMiddleware (req, next) {
if (!req.options.headers) {
req.options.headers = {};
}
if (localStorage.getItem('token')) {
req.options.headers.authorization = `Bearer ${localStorage.getItem('token')}`;
}
next();
},
}])
const client = new ApolloClient({ networkInterface });
export function provideApolloClient(): ApolloClient {
return client;
}