Skip to content

"Full data" GraphQL mode for Link fields#16237

Merged
brandonkelly merged 1 commit into5.6from
feature/link-gql
Nov 28, 2024
Merged

"Full data" GraphQL mode for Link fields#16237
brandonkelly merged 1 commit into5.6from
feature/link-gql

Conversation

@brandonkelly
Copy link
Copy Markdown
Member

@brandonkelly brandonkelly commented Nov 28, 2024

Description

Adds a “GraphQL Mode” setting to Link fields, with the options “Full data” and “URL only”.

“Full data” will be selected by default for new Link fields; “URL only” will be selected by default for existing Link fields (for backwards compatibility on existing GraphQL APIs).

When “Full data” is selected, Link fields will be represented in GraphQL as objects with the following sub-fields:

  • type
  • value
  • label
  • urlSuffix
  • target
  • url
  • elementType
  • elementId
  • elementSiteId
  • elementTitle

For mutating Link field values, an object will need to be passed with the following sub-fields:

  • type (set to a valid link type ID, e.g. url or entry)
  • value (set to the URL or element reference tag)
  • label (optional)
  • urlSuffix (optional)

Screenshot of GraphiQL in Craft CMS, updating a Link field value.

Related issues

@brandonkelly brandonkelly merged commit aa4f521 into 5.6 Nov 28, 2024
@brandonkelly brandonkelly deleted the feature/link-gql branch November 28, 2024 14:47
brandonkelly added a commit that referenced this pull request Nov 28, 2024
@brandonkelly brandonkelly mentioned this pull request Dec 2, 2024
@sgtpenguin
Copy link
Copy Markdown

@brandonkelly looking forward to this getting released so that I can use the native link field in my new project instead of a plugin. One thing I'd like to surface is that it would be best to be able to get the relative path for internal links, basically anything of the Entry type. I'm using NextJs, and in order for the links to function properly I need to use a relative path for internal links.

<Link href="/about">About</Link>

Is it possible to return the uri?

I've been using Typed Link Field for a few years and the query looks like this:

linkTo {
  url
  text
  type
  element {
    id
    uri
    title
  }
}

Then the Link component in React can switch handle output differently based on type

const Link = ({
  url,
  text,
  element,
  children,
  type,
  className,
}) => {
  if (!url && !element) return null;
  switch (type) {
    case "entry":
      return element ? (
        <RouterLink
          href={`/${element.uri === "__home__" ? "" : element.uri}`}
          className={className}>
          {children || text}
        </RouterLink> : null
      );

    default:
      return (
        <a
          className={className}
          href={url}
          target="_blank"
          rel="noopener noreferrer"
        >
          {children || text}
        </a>
      );
  }
};

@sgtpenguin
Copy link
Copy Markdown

Haven't tried Hyper, but they have a linkUri property. I think we'd also need a property for "Open In A New Tab"
Here's a link to the full interface they implemented:
https://verbb.io/craft-plugins/hyper/docs/developers/graphql#the-linkInterface-interface

@brandonkelly
Copy link
Copy Markdown
Member Author

I don’t see that being necessary. You can extract the URI from the url if you need it.

@sgtpenguin
Copy link
Copy Markdown

Thanks for the quick response.

Respectfully, I disagree. It definitely is necessary to have for client side routing to work correctly in a headless application so I see it as a basic requirement that every application needs as far as I know. Yes, you could use a regex or URL object to extract the relative path but it feels wrong to be pushing that operation to the client side – it's inefficient. If the data is already available on the server, why not expose it in the api?

In addition, the target attribute or the value of the "Open in a new tab" lightswitch needs to be added, or that toggle will do nothing in headless apps.

@brandonkelly
Copy link
Copy Markdown
Member Author

If the data is already available on the server, why not expose it in the api?

It’s not, though. Link fields only know about the full URL. So Craft would be doing the same URL parsing you could be doing.

In addition, the target attribute or the value of the "Open in a new tab" lightswitch needs to be added, or that toggle will do nothing in headless apps.

Sorry, I forgot to include target in the original PR description, but that’s available as well already. Updated the description.

@sgtpenguin
Copy link
Copy Markdown

Ok. Thanks for considering.

@nodoxi
Copy link
Copy Markdown

nodoxi commented Jan 27, 2025

Hm, why 'uri' is not available?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants