LHK-590 Added modern GraphQL Relay sample project with React (fsprojects#420)

Co-authored-by: Andrii Chebukin <andrii@lula.is>

Author: okhorsunenko-lula

.config/dotnet-tools.json

@@ -9,7 +9,7 @@
       ]
     },
     "fantomas": {
-      "version": "5.1.4",
+      "version": "5.2.0",
       "commands": [
         "fantomas"
       ]

.github/workflows/publish_ci.yml

@@ -7,13 +7,13 @@ on:
 
 jobs:
   publish:
-  
+
     runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
       uses: actions/checkout@v3
-      
+
     - name: Set Build Version
       run: |
         $File = (
@@ -24,10 +24,10 @@ jobs:
         $File.OwnerDocument.Save((Join-Path $PWD.ProviderPath Directory.Build.targets))
         echo "VERSION=$version" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf8 -Append
       shell: pwsh
-      
+
     - name: Install .NET Core
       uses: actions/setup-dotnet@v3
-      
+
     - name: Add the GitHub source
       run: dotnet nuget add source --username USERNAME --password ${{secrets.GITHUB_TOKEN}} --store-password-in-clear-text --name github "https://nuget.pkg.github.com/fsprojects/index.json"
 
@@ -61,6 +61,14 @@ jobs:
       run: |
         dotnet nuget push nuget/*Server*.nupkg -s "github" -k ${{secrets.GITHUB_TOKEN}}
 
+    - name: Pack FSharp.Data.GraphQL.Server.Relay project
+      run: |
+        cd src/FSharp.Data.GraphQL.Server.Relay
+        dotnet pack --no-build --nologo --configuration Release /p:IsNuget=true -o ../../nuget
+    - name: Publish FSharp.Data.GraphQL.Server.Relay project to GitHub
+      run: |
+        dotnet nuget push nuget/*Server.Relay*.nupkg -s "github" -k ${{secrets.GITHUB_TOKEN}}
+
     - name: Pack FSharp.Data.GraphQL.Server.Middleware project
       run: |
         cd src/FSharp.Data.GraphQL.Server.Middleware
@@ -82,4 +90,4 @@ jobs:
       run: |
         $path = "nuget/FSharp.Data.GraphQL.ProjectTemplates.$Env:VERSION.nupkg"
         dotnet nuget push $path -s "github" -k ${{secrets.GITHUB_TOKEN}}
-      shell: pwsh
+      shell: pwsh

.github/workflows/publish_release.yml

@@ -15,7 +15,7 @@ jobs:
       with:
         # This is necessary so that we have the tags.
         fetch-depth: 0
-        
+
     - name: Set Build Version
       run: |
         $version = "$env:GITHUB_REF_NAME"
@@ -60,6 +60,14 @@ jobs:
       run: |
         dotnet nuget push nuget/*Server*.nupkg -k ${{secrets.NUGET_SECRET}}
 
+    - name: Pack FSharp.Data.GraphQL.Server.Relay project
+      run: |
+        cd src/FSharp.Data.GraphQL.Server.Relay
+        dotnet pack --no-build --nologo --configuration Release /p:IsNuget=true -o ../../nuget
+    - name: Publish FSharp.Data.GraphQL.Server.Relay project to NuGet
+      run: |
+        dotnet nuget push nuget/*Server.Relay*.nupkg -k ${{secrets.NUGET_SECRET}}
+
     - name: Pack FSharp.Data.GraphQL.Server.Middleware project
       run: |
         cd src/FSharp.Data.GraphQL.Server.Middleware
@@ -81,4 +89,4 @@ jobs:
       run: |
         $path = "nuget/FSharp.Data.GraphQL.ProjectTemplates.$Env:VERSION.nupkg"
         dotnet nuget push $path -k ${{secrets.NUGET_SECRET}}
-      shell: pwsh
+      shell: pwsh

FSharp.Data.GraphQL.sln

@@ -10,6 +10,7 @@ $version = $dirBuildTargets.SelectSingleNode("//PropertyGroup[@Label='NuGet']/Ve
 [xml]$fsharpPackages = @"
 <ItemGroup Label="PackageReferences">
     <PackageReference Include="FSharp.Data.GraphQL.Server.Middleware" Version="$($version)" />
+    <PackageReference Include="FSharp.Data.GraphQL.Server.Relay" Version="$($version)" />
     <PackageReference Include="FSharp.Data.GraphQL.Server" Version="$($version)" />
     <PackageReference Include="FSharp.Data.GraphQL.Shared" Version="$($version)" />
 </ItemGroup>

Prepare template project for packing.ps1

@@ -0,0 +1,19 @@
+{
+  "passPerPreset": true,
+  "presets": [
+    {
+      "plugins": [
+        ["relay", {
+          "schema": "data/schema.json"}
+          ],
+        "syntax-async-functions",
+        "transform-class-properties",
+        "transform-object-rest-spread",
+        "react-require"
+      ]
+    },
+    "react",
+    "es2015",
+    "stage-0"
+  ]
+}

samples/relay-modern-starter-kit/.babelrc

@@ -30,4 +30,4 @@ necessarily infringed by the Software standing alone.
 
 A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
 or contributory infringement or inducement to infringe any patent, including a
-cross-claim or counterclaim.
+cross-claim or counterclaim.

samples/relay-starter-kit/PATENTS renamed to samples/relay-modern-starter-kit/PATENTS

@@ -0,0 +1,81 @@
+# Relay Modern Starter Kit with Pagination
+
+This kit includes an app server, a GraphQL server, and a transpiler that you can use to get started building an app with Relay. For a walkthrough, see the [Relay tutorial](https://facebook.github.io/relay/docs/tutorial.html).
+
+Few changes have been made to the original starter kit. It is now compatible with the [Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html) API version. It also uses a [PaginationContainer](https://facebook.github.io/relay/docs/PaginationContainer.html) for item retrieving.
+
+## Installation
+
+First install required npm modules:
+
+```
+npm install
+```
+
+Generate JavaScript sources of Relay-wrapped components by executing:
+
+```
+npm run relay
+```
+
+## Running
+
+Start the GraphQL server by executing:
+
+```
+fsharpi server.fsx
+```
+
+Start the Relay application server:
+
+```
+npm start
+```
+
+Visit `localhost:8090` in your browser in order to access the application.
+
+## Developing
+
+### GraphQL Server
+
+Following information supposed to get you started with modification of the GraphQL server.
+
+#### Debugging
+
+The sample contains a `server.fs` copy of the server and an F# project file which can be used for debugging with mono:
+
+```
+xbuild && mono --debug --debugger-agent=transport=dt_socket,server=y,address=127.0.0.1:55555 ./bin/Debug/mono/FSharp.Data.GraphQL.ModernRelay.exe 
+```
+
+This will start the server awaiting for the mono debugger to be attached.
+
+#### Uri
+
+By default the server will start on `localhost:8083`. This can be modified by changing `address` and `port` in `server.fsx` or `server.fs` respectively. Changing this settings requires adjustment of `graphqlServerUri` in `./src/relayEnvironment.jsx`.
+
+### Relay Application
+
+#### Schema modification
+
+Each time the schema is modified in the `server.fsx` GraphQL server, a new schema file has to be generated on the Relay application side.
+
+Accessing the `localhost:8083` in your browser will yield an introspection reply containing the schema of the database. Save this response to `./data/schema.json` whenever the schema is getting changed.
+
+Relay API has to know the path to the schema file. `.babelrc` contains this information by setting the `relay` plugin with `schema` option. Adjust this if the path to schema should change.
+
+The generated `./data/schema.json` or `./data/schema.graphql` (see optional below) file is used for the ahead-of-time compilation by Relay Modern compiler. The compilation process should be triggered by executing:
+
+```
+npm run relay
+```
+
+The command checks relevant `.jsx` and `.js` files in `./src` folder and generates their compiled  in `__generated__` for defined containers. Those are e.g. [FragmentContainer](https://facebook.github.io/relay/docs/fragment-container.html) or the root Relay tree [QueryRenderer](https://facebook.github.io/relay/docs/query-renderer.html). 
+
+#### Optional
+
+There are two accepted schema formats: `.json` and `.graphql`. The conversion to the latter can be done by executing `npm run json-to-graphql`. Input and output files can be adjusted in `./scripts/jsonToGraphql.js`.
+
+## License
+
+Relay Starter Kit is [BSD licensed](./LICENSE). We also provide an additional [patent grant](./PATENTS).