Neo4j Graphql library doesn't work for STRING IDs

[kashu94]

I've been trying to use neo4j graphql library with my existing database in neo4j. I was following the tutorial by William on "Graph Visualisation with GraphQL and react-force". But I'm getting this error that the particular node with it's "diagnosis_id" attribute isn't found. It is probably happening because it is a String and expects an Int. What do I do about this?

I'm attaching screenshots of the error ....

# this is pages/api/graphql.js file

import { gql, ApolloServer } from "apollo-server-micro";
import { Neo4jGraphQL } from "@neo4j/graphql";
import neo4j from "neo4j-driver";

const typeDefs = gql`
    type Diagnosis @exclude(operations: [CREATE, UPDATE, DELETE]) {
        diagnosis_id: ID
        treatment: [Treatment!]! @relationship(type: "DiagnosisToTreatment", direction: OUT)
    }
    type Treatment @exclude(operations: [CREATE, UPDATE, DELETE]) {
        treatment_id: ID
        description: String
        level1: String
        level2: String
        diagnosis: [Diagnosis!]! @relationship(type: "DiagnosisToTreatment", direction: IN)
    }
`;

const driver = neo4j.driver(
    process.env.NEO4J_URI,
    neo4j.auth.basic(process.env.NEO4J_USER, process.env.NEO4J_PASSWORD)
);

export default async function handler(req, res) {
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader("Access-Control-Allow-Origin", "https://studio.apollographql.com");
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    if (req.method === "OPTIONS") {
        res.end();
        return false;
    }

    const neoSchema = new Neo4jGraphQL({ typeDefs, driver });
    const apolloServer = new ApolloServer({ schema: await neoSchema.getSchema() });
    await apolloServer.start();
    await apolloServer.createHandler({
        path: "/api/graphql",
    })(req, res);
}

export const config = {
    api: {
        bodyParser: false,
    },
};

# this is pages/index.js file

import dynamic from "next/dynamic"
import { useQuery, gql } from '@apollo/client';
import { useState } from 'react';

const mostRecentQuery = gql`
{
  diagnoses (options: {limit:30}){
    __typename
    diagnosis_id
    treatment {
      __typename
      treatment_id
      level1
      level2
      description
    }
  }
}
`;

const NoSSRForceGraph = dynamic (() => import('../lib/NoSSRForceGraph'), {
  ssr: false,
});

const formatData = (data) => {
  const nodes = [];
  const links = [];

  if (!data.diagnoses) {
    return (nodes, links)
  }

  data.diagnoses.forEach( (d) => {
    nodes.push({
      __typename: d.__typename,
      diagnosis_id: d.diagnosis_id,
    })

    nodes.push({
      __typename: d.treatment.__typename,
      treatment_id: d.treatment.treatment_id,
      level1: d.treatment.level1,
      level2: d.treatment.level2,
      description: d.treatment.description,
    })

    links.push({
      source: d.diagnosis_id,
      target: d.treatment.treatment_id
    })
  })

  return {
    nodes,
    links
  }
}

export default function Home() {
  const [graphData, setGraphData] = useState({nodes: [], links: []})
  const {data} = useQuery(mostRecentQuery, {
    onCompleted: (data) => setGraphData(formatData(data))
  })
  return <NoSSRForceGraph nodeAuthColorBy={"__typename"} nodeLabel={"diagnosis_id"} graphData={graphData}/>
}

# this is pages/_app.js file

import {
  ApolloProvider,
  ApolloClient,
  InMemoryCache,
  HttpLink
} from '@apollo/client';

const createApolloClient = () => {
  const link = new HttpLink({
    uri: '/api/graphql'
  });

  return new ApolloClient({
    link,
    cache: new InMemoryCache()
  });
};

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={createApolloClient()}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;