Search code examples
javascriptangularinterfaceangular6contentful

Unable to filter on query parameter for contentful JS SDK methods


I am trying to get back only a certain content_type with by building a dynamic contentful service that could be re-used for different methods in the JS SDK. The filter on the content type - 'product' or sys.id is not working.

Service File:

import { Injectable } from '@angular/core';
import { createClient, Entry} from 'contentful';
import { environment } from '../environments/environment';
import { Observable, from} from 'rxjs';
import { map } from 'rxjs/operators';

export interface QueryObj {
  content_type: string;
  select?: string;
}
@Injectable({
  providedIn: 'root'
})
export class ContentfulService {
  private client = createClient({
    space: environment.contentful.spaceId,
    accessToken: environment.contentful.token
  });
  queries: QueryObj[];
  constructor() {
  }
  getContentfulEntries(): Observable<QueryObj[]> {
    const contentEntries = this.client.getEntries(this.queries);
    return from(contentEntries).pipe
      (map ((res: any) => res.items));
  }

Controller File:

import {Component, OnDestroy, OnInit} from '@angular/core';
import {ContentfulService} from '../services/contentful.service';
import { Subscription} from 'rxjs';
import { QueryObj} from '../services/contentful.service';

@Component({
  selector: 'r-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Setup Environment';
  private entriesSubscription: Subscription;
  queries: QueryObj[] = [
    {
      content_type: 'product',
      select: 'sys.id'
    }
  ];
  constructor(private contentfulService: ContentfulService) {}
    ngOnInit() {
      this.entriesSubscription = this.contentfulService.getContentfulEntries()
        .subscribe((queries: QueryObj[]) => {
          this.queries = queries;
          console.log(this.queries);
        });
    }
  ngOnDestroy () {
    this.entriesSubscription.unsubscribe();
  }
}


Solution

  • I'm not too familiar with Angular and the related TypeScript but are you passing an Array to getEntries? getEntries excepts only a query object. :)

      getContentfulEntries(): Observable<QueryObj[]> {
        // this.queries is a collection or? 👇🏻
        const contentEntries = this.client.getEntries(this.queries);
        return from(contentEntries).pipe
          (map ((res: any) => res.items));
      }