Watch a live product demo 👀 See how Sanity powers richer commerce 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– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern content platform that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing