CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-databaseangularfire2
Steve Doson
Steve Doson

Reputation: 713

Argument of type '{ query: {}; }' is not assignable to parameter of type 'QueryFn'

I am building an angular app where I have to upload and retrieve images from firebase databse. I am successfully being able to upload the images, but for retrieval I have the following bit of code in

service.ts

getFileUploads(query = {}) {
this.fileUploads = this.db.list(this.basePath, {
  query: query
});
return this.fileUploads
}

I keep getting the error

Argument of type '{ query: {}; }' is not assignable to parameter of type 'QueryFn'.

Object literal may only specify known properties, and 'query' does not exist in type 'QueryFn'.

The following is the entire service.ts code

import {Injectable} from '@angular/core';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import * as firebase from 'firebase';

import {FileUpload} from '../profile/fileupload';

@Injectable()
export class UploadFileService {

  constructor(private db: AngularFireDatabase) {}

  private basePath = '/uploads';
  fileUploads: AngularFireList<FileUpload[]>;

  pushFileToStorage(fileUpload: FileUpload, progress: {percentage: number}) 
 {
const storageRef = firebase.storage().ref();
const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) => {
    // in progress
    const snap = snapshot as firebase.storage.UploadTaskSnapshot
    progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100)
  },
  (error) => {
    // fail
    console.log(error)
  },
  () => {
    // success
    fileUpload.url = uploadTask.snapshot.downloadURL
    fileUpload.name = fileUpload.file.name
    this.saveFileData(fileUpload)
  }
);
}

 private saveFileData(fileUpload: FileUpload) {
  this.db.list(`${this.basePath}/`).push(fileUpload);
}

 getFileUploads(query = {}) {
this.fileUploads = this.db.list(this.basePath, {
  query: query
});
return this.fileUploads;
}
}

and the following is the component.ts for the component where I want to display the image

import { Component, OnInit } from '@angular/core';
import { ItemService } from '../services/item.service';
import {FileUpload} from '../profile/fileupload';
import {UploadFileService} from '../services/upload-file.service';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; 

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

  fileUploads: AngularFireList<FileUpload[]>;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
    this.fileUploads = this.uploadService.getFileUploads({l});
  }
}

Upvotes: 2

Views: 2184

Answers (1)

casieber
casieber

Reputation: 7542

The documentation for list querying with angularfire2 shows that the second parameter to the list() method should be a function and not an object.

Specifically, the method definition for list() from here shows that it is of the type

list<T>(pathOrRef: PathReference, queryFn?: QueryFn): AngularFireList<T>

and that QueryFn (defined here) is of the type

type QueryFn = (ref: DatabaseReference) => DatabaseQuery;

So the error is correct, that it is expecting you to pass a function as the second parameter and not an object.

Since your own query parameter does not have a type definition that you have posted here, it's hard for me to tell exactly what you are thinking a caller of your getFileUploads method would pass in, but it's likely that you need some sort of transformation between that object type and the QueryFn type that angularfire is expecting.

Upvotes: 2

Related Questions