How can I inject Ionic Storage into the other module's config?

@jehong wrote:

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;
}

Posts: 1

Participants: 1

Read full topic