Webpack-notes example and graphQL good practices

Devtools ComposeDB
1

I’m using the notes example to get ComposeDB logic and also learning GraphQL on the run, so I’d like to have some feedback/good practices.

I’m using graphiql to test the queries used on the example but some are not working.

I can create note with:

mutation CreateNote($input: CreateNoteInput!) {
  createNote(input: $input) {
    document {
      id
    }
  }
}

{
  "input": {
    "content": {
      "text": "Sent from graphiql",
      "title": "Starting to understand this"
    }
  }
}

And when I use

query NotesList {
  noteIndex(last: 10) {
    edges {
      node {
        text
        title
        id
      }
    }
  }
}

I’m getting all the notes added to the model (from all users), according to the query/mutations defined on the schema.graphql that’s working properly.

But then, with the same user, when I try to

query MyNotes {
  viewer {
    noteList(last: 10) {
      edges {
        node {
          text
          title
        }
      }
    }
    id
  }
}

I’m getting:

{
  "data": {
    "viewer": {
      "noteList": {
        "edges": []
      },
      "id": "did:key:z6MkjMRKGSEpwJBYDgYUoedELeEUnuh3JD3EBHVF6ajUDnus"
    }
  }
}

The way I’m thinking to solve this is to query:

query NotesList {
  noteIndex(last: 10) {
    edges {
      node {
        text
        title
        id
**
        author {
          id
        }
**   
      }
    }
  }
}

And after fetching it filter by viewer{id} on the front end, but even if it’d work it feels wrong.

The same is happening with the profile. even if I follow this logic

type Mutation {
  createProfile(input: CreateProfileInput!): CreateProfilePayload

When I query it with profileIndex I’m getting all of them but when I

query MyProfile {
  viewer {
    profile {
      id
      name
    }
  }
}

I’m getting null
It feels like there’s some logic that’s missing on the query/mutation definitions, but since I’m still figuring out how composeDb works and learning graphQL I’m not completly sure.
Is there any docs/ pages worth reading? I’ve already went through GraphQL’s but nothing.

Thank you, and congrats for composeDb. Way much better than old implementations.

2

Hi, I can’t reproduce locally the issues you’re seeing, are you using the latest versions of all Ceramic and ComposeDB packages please?
Also, is your Ceramic node configured to index all the models you’re interacting with?
Finally, is there any logic in your app that could remove or change the authenticated DID from the Ceramic instance please? The viewer is simply a proxy to the DID attached to the instance, so any change there is expected to affect the query.

3

I’ve used webpack-notes as my template and even when I’m using it vanilla I’m seeing this behaviour.

I’ve cloned it and when I try to npm install I get

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: webpack-notes-app@0.2.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.10.3
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"^5.10.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Since it’s just an UI stuff I just delete @mui/styles from package.json.

I update ceramic and compose dependencies to:

    "@ceramicnetwork/http-client": "^2.3.4",
    "@composedb/client": "^0.2.2",
    "@composedb/types": "^0.2.2",
    "@ceramicnetwork/common": "^2.6.0",
    "@composedb/devtools": "^0.2.2",
    "@composedb/devtools-node": "^0.2.2",

And on the CLI if I do ceramic -v I get 2.6.0

Then, if I run npm start I get

Uncaught Error: Cannot use GraphQLScalarType "String" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.
    at instanceOf (instanceOf.mjs:40:19)
    at isScalarType (definition.mjs:110:77)
    at isType (definition.mjs:88:5)
    at isNullableType (definition.mjs:379:10)
    at new GraphQLNonNull (definition.mjs:340:5)
    at SchemaBuilder._buildScalarFieldType (schema.js:368:33)
    at fields (schema.js:220:44)
    at resolveObjMapThunk (definition.mjs:434:40)
    at defineFieldMap (definition.mjs:689:20)
    at GraphQLObjectType._fields (definition.mjs:616:26)

To solve this I need to delete graphql from node_modules and install it again.

Then I run the node with ceramic daemon --network testnet-clay, I create the models with npm run composite:create I add them to daemon.config.json and restart the node. This is what I see, the first 2 models are the new ones.

[2022-09-15T13:20:23.823Z] IMPORTANT: Initializing SQLite connection
[2022-09-15T13:20:23.987Z] IMPORTANT: Starting Ceramic Daemon at version 2.6.0 with config:
{
  "anchor": {},
  "http-api": {
    "cors-allowed-origins": [
      ".*"
    ]
  },
  "ipfs": {
    "mode": "bundled"
  },
  "logger": {
    "log-level": 2,
    "log-to-files": false
  },
  "metrics": {
    "metrics-exporter-enabled": false,
    "metrics-port": 9090
  },
  "network": {
    "name": "testnet-clay"
  },
  "node": {},
  "state-store": {
    "mode": "fs",
    "local-directory": "/home/julianperassi/.ceramic/statestore/"
  },
  "indexing": {
    "db": "sqlite:///home/julianperassi/.ceramic/indexing.sqlite",
    "allow-queries-before-historical-sync": true,
    "models": [
      "kjzl6hvfrbw6cb2yftu20wt9ii6o2zp0ztbq9ude4drvv141l2rbo3g48jud4o1",
      "kjzl6hvfrbw6cap6rp7s4hmbw4x546fgcvtkamjlj3fk6ar19yejcz6ezk1awkr",
      "kjzl6hvfrbw6c9165gygecqama77d0t4283s5uzsrcj6wtldhqd9w7e4gofts9e",
      "kjzl6hvfrbw6c7ugfnougx0qh3mrs5whlecxiqnncrao4kc114emyc1m2wmkjhq",
      "kjzl6hvfrbw6ca3xk14tygmgqu4q26216v8pl3reufwz0lmhcrug5nt5gte224q",
      "kjzl6hvfrbw6catecxj62xgpcu80jk4uryfu3k25cmwh46pzmscs5upsix2nl9c",
      "kjzl6hvfrbw6c6iz705zvkkcrf3mhvk3lc13z1vnxq18mwmkon8y6bidicggvbc"
    ]
  }
}
[2022-09-15T13:20:24.049Z] IMPORTANT: Connecting to ceramic network 'testnet-clay' using pubsub topic '/ceramic/testnet-clay'

Then I compile them with npm run composite:compile and npm run composite:serve to graphiQL where I can create notes with:

mutation CreateNote($input: CreateNoteInput!) {
  createNote(input: $input) {
    document {
      id
    }
  }
}

But if I try to fetch them with

query NotesList($cursor: String) {
  viewer {
    noteList(last: 5, before: $cursor) {
      edges {
        node {
          id
          title
        }
      }
      pageInfo {
        hasPreviousPage
        startCursor
      }
    }
  }
}

I get

{
  "data": {
    "viewer": {
      "noteList": {
        "edges": [],
        "pageInfo": {
          "hasPreviousPage": false,
          "startCursor": null
        }
      }
    }
  }
}

But if I

query NotesList {
  noteIndex(last: 10) {
    edges {
      node {
        id
      }
    }
  }
}

I’m getting the notes I’ve added.

Any guess what can be? Also, I’m not sure how $cursor works, but even if I take out the logic around it I’m getting

{
  "data": {
    "viewer": {
      "noteList": {
        "edges": []
      }
    }
  }
}
4

If I use it from the UI I’m seeing the same behaviour. I can add notes since I can retrieve them copy/pasting their id on the url but they’re not being fetched on the sidebar

5

These examples are not templates, they are not designed to be used “as-is” but rather integrated in the monorepo. To setup the monorepo you should start with the installation instructions on GitHub - ceramicstudio/js-composedb: ComposeDB on Ceramic but even then, I wouldn’t recommend using these examples to get started as they are only meant to check the behavior of specific ecosystem packages.

@anon16214351 do you have or know of a template that can be used to get started with ComposeDB please?

6

I ran into the same issues with the next-notes example app in the repo. It would be good to have a working example to learn the basics of composeDB. Re-upping the question therefore, if there are any templates for ComposeDB to get started? Thank you!

2 Likes
7

No templates as of yet, I believe we have some that are in the works though.