Show 'tracks' in 'genre' collection

modgy.2 years ago

14

• 

  notchr2 years ago

  Hmm, I think I'd know how to do this with REST, but not graphql, what's your current query like?

• 

  modgy.2 years ago

  I've gotten as far as this

  @1049775120559898725

  
  
  

  query ListPicksTest {
    ListPicks(where: { genres: { exists: true }  }, limit: 300) {
      docs {
        genres {
          title
          slug
        }
      }
    }
  }

  
  
  

  I called ListPicks 'tracks' in my question just for clarity, but they're called List Picks here

  
  
  

  I'm not married to using GraphQL, I'm new to Payload coming from Sanity/Groq

• 

  notchr2 years ago

  And how do you issue that query?

  
  
  

  I'm not super familiar with graphql

  
  
  

  I usually do a fetch request

• 

  modgy.2 years ago

  I'm just in the graphql playground that payload supply at the moment

• 

  notchr2 years ago

  Hmm

  
  
  

  And that query doesnt return any results?

• 

  modgy.2 years ago

  I should say; I'm basing my approach to this on the Payload 'website' repo and they fetch docs like this:

  https://github.com/payloadcms/payload/blob/main/templates/website/src/app/_api/fetchDocs.ts
  
  

  So line 48:

  query: queryMap[collection].query,

  it fetches the doc based on the requested collection, and the query within that comes from GraphQL

• 

  notchr2 years ago

  But it doesn't return any results?

• 

  modgy.2 years ago

  So that query above does return results, it fetches all of the genres

  
  
  

  So it's sort of saying, "fetch the query if genres exists", which it does. But what I want it to say is "fetch the query if the genre equals 'punk'"

• 

  notchr2 years ago

  https://localhost:3000/api/listpicks?where[genre][equals]=rock
  
  

  would be the rest url with a fetch

  
  
  

  i think

  
  
  

  That says, get all list picks where the genre = rock

• 

  modgy.2 years ago

  Like:

  
  
  

  query ListPicksTest {
    ListPicks(where: { genres: { slug: { equals: "punk" } }  }, limit: 300) {
      docs {
        track
        genres {
          title
          slug
        }
      }
    }
  }

  
  
  

  Hmm so it should be possible with GraphlQL if it's possible with REST

• 

  notchr2 years ago

  Yep!

  
  
  

  Ill help out more soon, i gotta grab lunch

• 

  modgy.2 years ago

  No problemo

  
  
  

  I wonder if it's because 'genres' is a relationship with

  hasMany

  so a track could be tagged with 'punk', 'rock', etc

  
  
  

  the data looks like this

  
  
  

  "genres": [
    {
      "id": "65e1cca0575bfdb1bacdba33",
      "title": "Indie",
      "createdAt": "2024-03-01T12:40:00.655Z",
      "updatedAt": "2024-03-01T16:46:01.998Z",
      "slug": "indie"
    },
    {
      "id": "65e1ccab575bfdb1bacdba3b",
      "title": "Electronic",
      "createdAt": "2024-03-01T12:40:11.623Z",
      "updatedAt": "2024-03-01T16:45:56.866Z",
      "slug": "electronic"
    }
  ],

  
  
  

  This works actually:

  http://localhost:3000/api/list-picks?where[genres.slug][equals]=punk
  
  

  That seems to return what I'd expect. Question is how to do that in GraphQL, or should I just forego GraphQL altogether and just use REST 🤔

• 

  notchr2 years ago

  Well

  
  
  

  I'm a fan of REST, but it depends on what you're most comfortable with!

• 

  modgy.2 years ago

  I'd prefer REST I think, just unsure how to set this up with Payload. Typically when using Sanity I'd have a function like this:

  
  
  

  export function sanityFetch({ query, params = DEFAULT_PARAMS, tags = DEFAULT_TAGS }) {
    const isDraftMode = draftMode().isEnabled;
    if (isDraftMode && !token) {
      throw new Error("The `SANITY_API_READ_TOKEN` environment variable is required");
    }
  
    // @TODO this won't be necessary after https://github.com/sanity-io/client/pull/299 lands
    const sanityClient =
      client.config().useCdn && isDraftMode ? client.withConfig({ useCdn: false }) : client;
  
    return sanityClient.fetch(query, params, {
      // Only validate cache if there's a revalidation webhook setup
      cache: "no-store",
      ...(isDraftMode && {
        cache: undefined,
        token,
        perspective: "previewDrafts",
      }),
      next: {
        ...(isDraftMode && { revalidate: 30 }),
        tags,
      },
    });
  }

  
  
  

  and then could run

  sanityFetch.fetch(query, params, tags);
  
  

  I think I can probably close this as I seem to be able to do what I want using the REST API which I'll be using instead of GraphQL.