Better example query when creating the first app

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

When I create my first app I see the example function that returns 3 entries. Then in the UI editor, I click on Add Query and create a serverside Javascript query. Should we show a template like?:

import { createQuery } from "@mui/toolpad-core";

export const abc = createQuery( 
 async function example({ parameters }) {
  return [
    { firstname: 'Nell', lastName: 'Lester' },
    { firstname: 'Keanu', lastName: 'Walter' },
    { firstname: 'Daniella', lastName: 'Sweeney' },
  ];
},
{
  parameters: {
    firstname: {
      typeDef: { type: "string" },
    },
    lastname: {
      typeDef: { type: "string" },
    },
  },
}
);

In UI:

The Preview button will still work and will provide more clarity about how createQuery works.

More thoughts:

1. Also, the name abc here should be the same as the name I write when creating the query.
2. What is the point of creating a query when all functions are accessible in any query. Should we not just replace queries in the UI with functions? We have defined queries and functions by the same name, isn't that redundant? Reference screenshot:

[apedroferreira]

We definitely should guide the user more when creating a new query - automatically creating a template query as proposed seems like a straightforward way to do it - but I think we'd need to automatically give the query a name at first?

We should maybe make the template as easy as possible to edit though, so maybe it should be almost blank (e.g.: no parameters). The tradeoff would be that it wouldn't serve as an example to the user as much.

About 2, using named functions like that seems redundant and unnecessary, but I might be missing some possible use for it?