Graphql schema in Next app

Help Developers
,
1

Hi there,

I hope I don’t ask the questions that have been asked before, here we go.

I want to use graphql end point on speckle.xyz server to create graphql=>prisma schema to make relational templates. Its been quite hard to find an example on what I want, I was wondering whether anyboyd has an idea.

The app is written with NextJS. The idea is to load let’s say a whole stream and filter them out base on their properties and feed the selected IDs to Speckle viewer - I probably miss many integration steps but in my head could be possible.

I appreciate all your helps.

regards,
Ashkan

3

I’m unfamiliar with Prisma or NextJS myself - I’ll ask around until I get a chance to look into this.

Are you able to describe a little what use case you are looking to fulfill - or if that is NDA territory, what a relational template means in the context you are asking about. Perhaps the Speckle Community can bring advice to bear that’s relevant without being tied to the tech stack

5

Thanks Jonathan!

The main idea is to load bunch of tagged objects in one go from a stream and being able to for example turn them on and off, on Speckle viewer or isolate specific data parts for data vis - the relational template helping to just structure the same data and repurpose them for different metrics or so. I hope it makes sense.

Also Graphql is the only part in the tech stack that should stay, the rest is only what I’m currently working with :slight_smile:

Thanks again.

1 Like
6

Hey @ashdotio - from your initial message, I’m not quite sure which part in particular is blocking you, but thought I could share some info that might help.

The speckle viewer docs has some information on hiding/showing objects, and you can also access the dataTree from the viewer object, so you could get your object IDs from that.

Alternatively, you can make graphQL queries to fetch your objects. One of our developers at Arup works on ACT which is open-source, which has some examples of building queries. You can follow that through to see how they are converted into objects with types defined in the project. Note it is an app made with Vue, these parts of the code are just straight Typescript so it doesn’t matter if you’re trying to use Vue or NextJS (or any other React framework).

That being said, have you checked out the PowerBI connector? It might already contain some of the functionality you’re trying to implement!

3 Likes
7

Thanks for the reply @d.naughton.

Probably I’ll find some answers to some of my question by looking through building queries. I need to see a viewer example with React/Vue component logic.

I want to use JS frameworks to have more freedom working with different tools and end points, I’m not sure how much I can go further with integrability and user experience with PowerBI - I’ll have a look.

Thanks again.

1 Like
8

Feel free to check out this repo on my github which shows a very quick way to instantiate the viewer in a react context and also some commented out code showing how to interact with the data tree.

3 Likes
9

You might wanna have a look at this section of the Viewer docs: Working with Speckle data. In this case you will be loading all the objects on a stream and performing the filtering using the viewer (post-load).

In the case you want to do the filtering pre-load, which I think would be smart if you want to load just bits and pieces from different streams.You can use the GraphQL API to query the id’s of the objects you want to load and pass them to the viewer.

  1. Get the root object id from a specific commit/stream you want to get data from.
query RootObject {
  stream(id:"a-stream-id") {
    commit(id: "a-commit-id") {
      referencedObject
    }
  }
}
  1. Get the id’s of “desired” objects on this commit. My desired objects are walls.
query OnlyWalls {
  stream(id:"a-stream-id") {
    object(id:"referenced-object-id-from-previous-query") {
      children(
        query: {
          field: "speckle_type",
          value:"Objects.BuiltElements.Wall:Objects.BuiltElements.Revit.RevitWall",
          operator: "="
        }
      ) {
        objects {
          id
        }
      }
    }
  }
}
  1. Get the id’s of the walls and pass them to the viewer.
  const viewer = new Viewer(container);
  const streamId = "a-stream-id";
  const wall_ids: string[] = ["the ids you got from the query here"];
  for (const id of wall_ids) {
    viewer.loadObject(`https://speckle.xyz/streams/${streamId}/objects/${id}`);
  }

Not sure how Prisma plays a role here, can you tell more about what you’re trying to do with it?

5 Likes
10

Thanks Victor! This probably helps me a lot along the way. I’ll check it out.

Prisma or any ORM suppose to turn queries into relational objects(similar to classes with specific properties).

2 Likes