Use Sanity CMS with Angular - blazed-space/fire-angular GitHub Wiki

 export const environment = {
  production: false,
  sanity: {
   projectId: '< sanity project id>',
   dataset: '< dataset, usually production|development >',
   useCdn: true,
  },
  web: {
   url: '<#< website-url >#>',
  },
 }

import { HttpClient } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';
import { WINDOW } from '@ng-web-apis/common';
import sanityClient, { ClientConfig, SanityClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';
import { ImageUrlBuilder } from '@sanity/image-url/lib/types/builder';
import { SanityImageSource } from '@sanity/image-url/lib/types/types';
import { map, Observable } from 'rxjs';
import { environment } from '../environments/environment';
@Injectable({
 providedIn: 'root',
})
export class SanityService {
 private client: SanityClient;
 private imageUrlBuilder: ImageUrlBuilder;
 private clientConfig: ClientConfig = {
  projectId: environment.sanity.projectId,
  dataset: environment.sanity.dataset,
  apiVersion: this.getApiVersion(),
  useCdn: false,
 };

  constructor(private http: HttpClient, @Inject(WINDOW) private wnd: Window,) {
   this.client = this.createClient();
   this.imageUrlBuilder = imageUrlBuilder(this.client);
  }

  getImageUrlBuilder(source: SanityImageSource): ImageUrlBuilder {
   return this.imageUrlBuilder.image(source);
  }

  fetch<T>(query: string): Observable<T> {
   const url = `${this.generateSanityUrl()}${encodeURIComponent(query)}`
   return this.http.get(url).pipe(map((response: any) => response.result as T));
  }

  private createClient(): SanityClient {
   return sanityClient(this.clientConfig);
  }

  private generateSanityUrl(): string {
  const { apiVersion, dataset, projectId } = this.clientConfig;

  const baseUrl = 
  this.wnd.location.href.startsWith(environment.web.url) || 
  this.wnd.location.href.startsWith('http://localhost:4200') ? 
  `https://${projectId}.api.sanity.io/` : `${this.wnd.location.origin}/api/`;

  return `${baseUrl}${apiVersion}/data/query/${dataset}?query=`;
 }

 private getApiVersion(): string {
  return `v${new Date().toISOString().split('T')[0]}`;
 }
}

import { Pipe, PipeTransform } from '@angular/core';
import { SanityService } from './sanity-service.service';
import { SanityImageSource } from '@sanity/image-url/lib/types/types';

@Pipe({ name: 'sanityImage' })
export class SanityImagePipe implements PipeTransform {
 constructor(private sanityService: SanityService) {}

 transform(value: SanityImageSource, width?: number): string {
  if (width) {
   return this.sanityService.getImageUrlBuilder(value).width(width).url();
  }
  return this.sanityService.getImageUrlBuilder(value).url();
 }
}

 @NgModule({
  declarations: [
  ...
  SanityImagePipe,
  ...
  ]
 })

 import { Observable } from 'rxjs';
 import { SanityService } from '../sanity-service.service';

export interface Movie {
 _id: String,
 title: String,
 releaseDate: Date,
 body: String,
 poster: SanityImageSource, // = string | SanityReference | SanityAsset | 
 SanityImageObject etc.
}

@Component({
 selector: 'app-movies',
  template: `
   <main class="container">
    <div *ngFor="let movie of movies$ | async">
     <img [src]="movie.poster | sanityImage:200" />
     <h3>{{ movie.title }}</h3>
     <p>Released on {{ movie.releaseDate | date }}</p>
    </div>
   </main>
  `,
  styleUrls: ['./movies.component.css']
})
export class MoviesComponent implements OnInit {
 movies$: Observable<Movie[]>
			
 constructor(private sanityService: SanityService ) { 
  this.movies$ = this.sanityService.fetch<Movie[]>(
   `*[_type == "movie"]{
      _id,
      title,
      releaseDate,
      poster,
      author->
   }`
  )  
 }
}

 import { HttpClientModule } from '@angular/common/http';

@NgModule({
 ...
 imports:[ HttpClientModule ]
 ...
})

import { Pipe, PipeTransform } from '@angular/core';
import {toHTML} from '@portabletext/to-html';

@Pipe({ name: 'toHTML' })
export class ToHTMLPipe implements PipeTransform {
 constructor() {}

  transform(value: any): string {
   return toHTML(value);
  }
}

@NgModule({
 declarations: [
  ...
  ToHTMLPipe,
  ...
 ]
})