-1

So I want to have a select widget where the options are based on some dynamic data that I have to query for. However, it seems that custom widgets break when importing useStaticQuery.

The below gives me "no control widget in the CMS". It works fine without the useStaticQuery import.

import React from 'react';

import { useStaticQuery, graphql } from "gatsby"

export class CustomControl extends React.Component {

  render() {
      return (
        <div>
          ...
        </div>
      )
  };
}


export const CustomPreview = (props) => {
  return (
    <div></div>
  );
}

Generally, is there a best way/practice to go about creating a custom widget that can handle dynamic values?

Update:

I have tried the relation widget with no luck. I have existing data in a collection but can't seem to access it from the widget. Does someone have a working version of one I can go off of?

The collection that is meant to be the "data":

  - label: Team
    name: team
    folder: 'src/pages/team' 
    create: true
    fields:
      - {label: 'Name', name: 'name', widget: string}

and the relation widget:

 - label: 'Relation widget'
   name: 'relationWidget'
   widget: 'relation'
   collection: 'team'
   searchFields: ['name']
   valueField: 'name'
   displayFields: ['name']
yankeedoodle
  • 353
  • 2
  • 11
  • sure but why not just add the netlify tag. there were only 4 to begin with. I get it isn't a question directly related to gatsby but an expert in gatsby will likely have some insight because the two generally go hand in hand, no? – yankeedoodle Dec 20 '21 at 14:02
  • I may delete it by mistake, I don't remember. I have them indeed until today your question was poorly detailed. `useStaticQuery` works under the scope of Gatsby (it's a custom hook), in your scenario, you are in Netlify's (plain React), hence the solution, without making further inquiries in the approach, will be easy if you face it as an API/fetch or using React's state. Can you share your "working" trial instead? https://www.netlifycms.org/docs/custom-widgets/#writing-react-components-inline – Ferran Buireu Dec 20 '21 at 14:06
  • I haven't changed the detail of the question. I added a different approach I took. And I also don't have a working trial at the moment, hence the question being on here. What I have found is that a relation widget from NetlifyCMS seems to be the best answer, however I can't seem to get any data to come through. This could be because I'm running the backend as a test-repo, but even after mocking some data it still doesn't come through – yankeedoodle Dec 20 '21 at 14:53

1 Answers1

0

With the NetlifyCMS structure, the best way to access other data is through the relation widget rather than a query.

However, in order to actually see this working, the site needs to be live. You can't locally mock data. Meaning, you can't go to localhost:8000/admin and see the relation widget pull anything.

(This is kind of a hassle because you have to authenticate a user as well and rebuild the whole site just to see the one change. It seems like you should be able to either query or just run the CMS locally and mess around with it that way)

Update

In order to pass multiple values through a relation widget: value_field: "{{value1}}-{{value2}}"

create a proxy server to run the CMS locally. This is still in beta at the moment for netlifyCMS but seems to work well. https://www.netlifycms.org/docs/beta-features/

yankeedoodle
  • 353
  • 2
  • 11