Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Help with filtering posts by tag in GROQ and React

12 replies
Last updated: Jan 22, 2021
Hello, Im trying to understans GROQ and need help understanding what to do next. I want to in post filter all tags with the string internship and let them show when pushing the button on the navbar. This is my code.

🙏
import { useEffect, useState } from "react";
import sanityClient from "../../client.js";
import { Link, useLocation } from "react-router-dom";
import styles from "./allPosts.module.scss";
import { useMousePosition } from "../Animation/useMousePosition"



export default function AllPosts() {
    const [allPostsData, setAllPosts] = useState(null);
    const position = useMousePosition();
    const location = useLocation()
    console.log(location)

    useEffect(() => {
        sanityClient
        .fetch(
            `*[_type == "post" ]{
                title,
                slug,
                tags,
                mainImage{
                    asset ->{
                        _id,
                        url,
                        alt,
                    }
                }
            }`
        )
        .then((data) => setAllPosts(data))
        .catch(console.error)
    }, [])
    return (
        <div className={styles.flex}>
            <div className={styles.landingTitle}>
            {position.x}:{position.y}
                <h1 className={styles.verticalText}>Work</h1>
            </div>

            <div className={styles.wrapper}>
                {allPostsData &&
                    allPostsData.map((post, index) => (
                        <Link to={'/' + post.slug.current} key={post.slug.current}>
                            <span key={index}>
                                <img className={styles.heroImage} 
                                    src={post.mainImage.asset.url} 
                                    caption={post.mainImage.caption} 
                                    alt={post.mainImage.alt}
                                />

                                <h2 className={styles.title}>
                                    {post.title}
                                </h2>
                            </span>
                        </Link>

                    ))}

            </div>
        </div>
    )
}

Jan 22, 2021, 8:21 AM
Hi
user G
! Let’s keep it in this thread:) also, you might want to use code blocks to make it a bit more readable. https://slack.com/help/articles/202288908-Format-your-messages
Jan 22, 2021, 8:49 AM
user Y
thanx I’ll think of that in future questions 🙂And while you are in the thread, can you plz help me?

I also tried this code in a new component but nothing is working…

useEffect(() => {
    sanityClient.fetch(
        ` *[_type == "post" ] {
            tags,
            'internship' : *[_type == 'internship']{
                title,
                slug,
                mainImage{
                    asset ->{
                        _id,
                        url,
                        alt,
                    }
                }
            }`,
    )
    .then((data) => setInternshipData(data))
    .catch(console.error);
    }, []);

Jan 22, 2021, 9:00 AM
Sure!• Do you have a repo with the code in it? It's easier to help out if I can see your schemas
• You can create a code block by typing three backticks in the message field:

```
Or use this button in the formatting bar
🙂
Jan 22, 2021, 9:04 AM
Should it look like this? because i used the &lt;/&gt; button 😳
Jan 22, 2021, 9:07 AM
Try the one the whole way to the right 🙂
Jan 22, 2021, 9:08 AM
Jan 22, 2021, 9:09 AM
I'm not 100% sure I understand what you're trying to do. I can't see any type named 
internship
.
You want to query all your 
post
 document, and under each 
post
you want to… ?
Jan 22, 2021, 9:39 AM
in the in the post json i have tags, I want to display all tags with “internship”.
{
      name: 'tags',
      type: 'array',
      description: 'add relevent taggs for improve SEO',
      of: [
        {
          type: 'string',
        },
      ],
      options: {
        layout: 'tags',
      },
    },
Thanx for helping me, im really grateful
Jan 22, 2021, 9:42 AM
All posts that has an 
internship
 tag?
Jan 22, 2021, 10:47 AM
yes
Jan 22, 2021, 10:48 AM
*[_type == "post" ]{
  title,
  slug,
  tags,
  'internships': *[_type == "post" && 'internship' in tags]{
      _id,
      title,
      slug,
  },
  mainImage{
      asset ->{
          _id,
          url,
          alt,
      }
  }
}
This might work?
Jan 22, 2021, 10:49 AM
Tack
user Y
I’ll try to make it work with the react part 👍
Jan 22, 2021, 11:06 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?