Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

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...

13 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

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 </> 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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.