Trying to filter thumbnail data

[alyssaaaa]

Trying to filter thumbnail data so that it only returns images with width: 480. This is what I have so far:

{
allInstaNode(
limit: 10
filter: {thumbnails: {elemMatch: {config_width: {eq: 480}}}}
) {
edges {
node {
thumbnails {
src
config_width
}
}
}
}
}

Any ideas why that is not giving me my desired filtered data?

[oorestisime]

I am not really at ease with GraphQL yet but it seems that elemMatch will not do what you want. AFAIU gatsby internally uses sift https://github.com/crcn/sift.js/tree/master#elemmatch and the elemMatch it seems to be projecting all returning results.

since you are filtering thumbnails it find the ones that have the desired width and returns the whole array.

I am searching for a solution

[oorestisime]

Yep i think all the functions project results. It seems it is not possible to filter out specific items like you need to. But you can do this in js easily.

[oorestisime]

@alyssaaaa can i close this? did you manage to find what you were looking for?

[alyssaaaa]

@oorestisime, thank you for your quick response. I performed the filter in js as I wasn't able to figure out how to filter the thumbnail array by the config property. TY!

[birksy89]

Sorry to resurrect an old thread - I've been having the same issue, but I put it down to not knowing the GraphQL syntax.

@oorestisime - If you were to look at this again, would you be able to point me in the right direction, or is this a bug?

Thanks in advance 😄

[oorestisime]

Hey,

So it is not clear from your message, to me, what are you trying to do. You are also trying to filter the thumbnail data?

[birksy89]

Yes, I've been struggling with this all morning 😢

I've currently got it being filtered on the "client" - but I'm trying to be a bit better at using GraphQL.

I can't seem to filter on any of the "thumbnail" properties.

Any help would be greatly appreciated.

Thanks

[oorestisime]

Yeah i still think it is not possible to do this (although i repeat i am also new to graphql).

I wonder why you don't want to do it in the client side, I am not sure you will gain that much in size to be meaningful (although i haven't tested this), or maybe there is another reason i fail to see.

Are you using the same sized thumbnail everywhere? Maybe the plugin could include an option thumbnail_width that enables filtering them right when the plugin fetches the data, so that when you query you get the desired ones directly.

[birksy89]

Ok, I appreciate your honesty. The truth is I can survive without needing this, but as I am trying to learn GraphQL I have been trying to progress this.

I only started using this plugin yesterday, and it's been my primary source for learning.

Thanks for taking the time to respond.

[oorestisime]

Yeah i see no worries!
The thing is that what you try to accomplish (under this context) is not entirely graphql related. The query mentioned above makes use of sift, which helps project results instead of filtering.

Maybe somebody more experienced on that matter can help out. i suggest you join (if not done already) reactiflux community https://www.reactiflux.com/ and try your luck in gatsby channel

[oorestisime]

In any case if there's something to change in the plugin i am more happy to do it or accept a contribution for it :)