Btukfyl

I am using ngrx 6 and angular 6, my code looks as follows:

1. 
   

   effects.ts

   
   
   

   import * as fromProjectMemberActions from '../project-member/project-member.actions';
   
   import * as fromProjectMemberGraphQL from '../../members/members.graphql';
   
   
   
   @Effect({dispatch: false})
   
   loadProjectMember$ = this.actions$.pipe(
   
   ofType(fromProjectMemberActions.ProjectMemberActionTypes.GetProjectMembers),
   
   tap(
   
     action => {
   
       this.apollo.watchQuery({
   
         query: fromProjectMemberGraphQL.GET_ALL_PROJECT_MEMBERS,
   
         variables: { 
   
           projectID : // Project ID is needed
   
         }
   
       }).valueChanges.subscribe((response: any) => {
   
           console.log(response)
   
           this.store.dispatch(
   
             new fromProjectMemberActions.UpsertProjectMembers({
   
               projectMembers: response.data.findAllProjectMember
   
             })
   
           )
   
           this.store.dispatch(
   
                 new fromProjectMemberActions.DoneLoadingProjectMembers()
   
             )
   
       })
   
     }
   
   )
   
   );
   
   

   
   


2. 
   

   project-member.actions.ts

   
   
   

   export class GetProjectMembers implements Action {
   
     readonly type = ProjectMemberActionTypes.GetProjectMembers;
   
   }
   
   export class UpsertProjectMembers implements Action {
   
     readonly type = ProjectMemberActionTypes.UpsertProjectMembers;
   
       constructor(public payload: { projectMembers: ProjectMember }) {}
   
     }
   
   

   
   


3. 
   

   members.graphql.ts

   
   
   

   import gql from 'graphql-tag';
   
   
   
    export const GET_ALL_PROJECT_MEMBERS = gql`
   
    query getAllProjectMembers($projectID: Long!) {
   
       findAllProjectMembers(projectId: $projectID) {
   
         id
   
         memberId
   
         memberType
   
      }
   
    }
   
   `;
   
   

   
   


4. 
   

   The given graphql API is seen as follows on graphql playground

   
   
   

   query{
   
     findAllProjectMembers(projectId: projectID) {
   
       id
   
       memberId
   
       memberType
   
     }
   
   }
   
   

   
   
   

   If you replace projectID above with a number eg: 2 it will query data successfully

   
   


5. 
   

   The url where the Project ID to be used on number 1 is passed through the following URL

   
   
   

   http://localhost/project-manager/view-project/2/members
   
   

   
   

I need help to extract that project ID above and use it in effects file to query a list of members

I would say.

// update project-member.actions.ts

export class GetProjectMembers implements Action {

  readonly type = ProjectMemberActionTypes.GetProjectMembers;

  constructor(public payload: { projectId: number }) {}

}

// and update effect

@Effect({dispatch: false})

loadProjectMember$ = this.actions$.pipe(

ofType(fromProjectMemberActions.ProjectMemberActionTypes.GetProjectMembers),

map((action: any) => action.payload),

tap(

  payload => {

    this.apollo.watchQuery({

      query: fromProjectMemberGraphQL.GET_ALL_PROJECT_MEMBERS,

      variables: { 

        projectID : payload.projectId

      }

    }).valueChanges.subscribe((response: any) => {

        console.log(response)

        this.store.dispatch(

          new fromProjectMemberActions.UpsertProjectMembers({

            projectMembers: response.data.findAllProjectMember

          })

        )

        this.store.dispatch(

              new fromProjectMemberActions.DoneLoadingProjectMembers()

          )

    })

  }

)

);

// may be in the component or where you dispatching action Pass projectId

subscribe to router {

  this.store.dispatch(new GetProjectMembers({ projectId })

}